| <!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;"> |
| <!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> |
| <!-- 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 --> |
| <!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; |
| <!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; |
| <!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> |
This is an overview of WICG/aom #192 and why it's a problem for web component authors using shadow DOM.
Let's consider the classic combobox pattern from the WAI ARIA Authoring Practices v1.2:
| <!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; |
| @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 |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>ElementInternals with role</title> | |
| <style> | |
| label, fancy-label { | |
| display: block; | |
| } | |
| </style> | |
| </head> |