adoptedstylesheets-adopt-style.tentative.html (862B)
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 <p>Test passes if there is a filled green square.</p> 7 <style id="styleSheet"> 8 div { 9 background-color: green !important; 10 } 11 </style> 12 <my-element id="host"></my-element> 13 <script> 14 customElements.define('my-element', class extends HTMLElement { 15 connectedCallback() { 16 this.attachShadow({mode:'open'}).append(document.createElement('div')); 17 const sheet = new CSSStyleSheet(); 18 sheet.replaceSync(` 19 div { 20 display: block; 21 width: 100px; 22 height: 100px; 23 background: red; 24 } 25 `); 26 this.shadowRoot.adoptedStyleSheets = [sheet, styleSheet.sheet]; 27 } 28 }); 29 </script>