adoptedstylesheets-adopt-link.tentative.html (867B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>adoptedStyleSheets adopt link tag</title> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10013"> 5 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 6 <link rel="stylesheet" href="./resources/adoptedstylesheet-adopt-link.css" id="linkSheet"> 7 <p>Test passes if there is a filled green square.</p> 8 <my-element id="host"></my-element> 9 <script> 10 customElements.define('my-element', class extends HTMLElement { 11 connectedCallback() { 12 this.attachShadow({mode:'open'}).append(document.createElement('div')); 13 const sheet = new CSSStyleSheet(); 14 sheet.replaceSync(` 15 div { 16 display: block; 17 width: 100px; 18 height: 100px; 19 background: red; 20 } 21 `); 22 this.shadowRoot.adoptedStyleSheets = [sheet, linkSheet.sheet]; 23 } 24 }); 25 </script>