Skip to content

Instantly share code, notes, and snippets.

View nolanlawson's full-sized avatar

Nolan Lawson nolanlawson

3.2k followers · 40 following
View GitHub Profile
@nolanlawson
nolanlawson / index.html
Created June 16, 2022 20:19
delegation
<!-- 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 June 14, 2022 05:34
Dialog element - repro browser issue with shadow element
<!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 June 13, 2022 14:10
Shadow dialog example - first element is closed
<!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 June 9, 2022 23:28
Repro Chrome whenDefined issue
<!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 June 2, 2022 18:06
AOM descendant/ancestor restriction problem explainer

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:

@nolanlawson
nolanlawson / index.html
Created May 28, 2022 20:57
Test BF Cache
<!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 14:55
Stylesheet parse cache demo
@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 20:45
ElementInternals - ariaLabel and role
<!doctype html>
<html>
<head>
<title>ElementInternals with role</title>
<style>
label, fancy-label {
display: block;
}
</style>
</head>
@nolanlawson
nolanlawson / index.html
Created May 16, 2022 00:10
promise-worker demo
<!doctype html>
<html>
<script src="./promise-worker.min.js"></script>
</html>
@nolanlawson
nolanlawson / index.html
Created May 6, 2022 18:21
Element.prototype.part demo
<!doctype html>
<html>
<head>
<title>Element.prototype.part demo</title>
</head>
<body>
<h1>Element.prototype.part demo</h1>
<script>
const el = document.createElement('div');
console.log('part' in el);