Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
nolanlawson / index.html
Last active Jun 19, 2022
Separate styles vs one big style
View index.html
This file has been truncated, but you can view the full file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Separate styles vs one big style</title>
</head>
<body>
<main style="max-width: 600px; margin: 0 auto;">
@nolanlawson
nolanlawson / imports.html
Last active Jun 16, 2022
Speculative preparser test
View imports.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS preparser: imports</title>
</head>
<body>
<h1>CSS preparser: imports</h1>
<pre id="display"></pre>
<script>
View index.html
<!-- delegation -->
<x-input aria-labelledby="foo">
#shadow-root
<input type=text autoarialabelledby> <!-- delegates aria-labelledby to the host -->
</x-input>
<!-- reflection -->
<x-label id="foo">
#shadow-root reflects=ariaLabelledBy
<label reflectsAriaLabelledBy> <!-- reflects its "id" upward, in a sense -->
@nolanlawson
nolanlawson / index.html
Last active Jun 14, 2022
Dialog element - repro browser issue with shadow element
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog element and shadow DOM - first element is in a closed shadow root</title>
<style>
body {
margin: 0 auto;
max-width: 400px;
padding: 40px;
@nolanlawson
nolanlawson / index.html
Last active Jun 13, 2022
Shadow dialog example - first element is closed
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog element and shadow DOM - first element is closed</title>
<style>
body {
margin: 0 auto;
max-width: 400px;
padding: 40px;
@nolanlawson
nolanlawson / index.html
Created Jun 9, 2022
Repro Chrome whenDefined issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Chrome whenDefined issue</title>
</head>
<body>
<h1>Repro Chrome whenDefined issue</h1>
<pre id="display"></pre>
<script>
@nolanlawson
nolanlawson / readme.md
Last active Jun 2, 2022
AOM descendant/ancestor restriction problem explainer
View readme.md

AOM descendant/ancestor restriction problem explainer

Summary

This is an overview of WICG/aom #192 and why it's a problem for web component authors using shadow DOM.

Consider the combobox

Let's consider the classic combobox pattern from the WAI ARIA Authoring Practices v1.2:

View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Test BF Cache</title>
<style>
body {
margin-top: 15vh;
margin-bottom: 300vh;
@nolanlawson
nolanlawson / bootstrap.min.css
Last active May 25, 2022
Stylesheet parse cache demo
View bootstrap.min.css
@charset "UTF-8";/*!
* Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,6
@nolanlawson
nolanlawson / index.html
Last active May 24, 2022
ElementInternals - ariaLabel and role
View index.html
<!doctype html>
<html>
<head>
<title>ElementInternals with role</title>
<style>
label, fancy-label {
display: block;
}
</style>
</head>