shadowrootadoptedstylesheets-with-declarative-module.html (1276B)
1 <!DOCTYPE html> 2 <title>shadowrootadoptedstylesheets with Declarative CSS Module</title> 3 <meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" /> 4 <link rel='help' href='https://github.com/whatwg/html/pull/11687'> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 8 <style type="module" specifier="foo"> 9 span {color:blue} 10 </style> 11 12 <div id="host"> 13 <template shadowrootmode="open" shadowrootadoptedstylesheets="foo"> 14 <span id="test_element">Test content</span> 15 </template> 16 </div> 17 18 <script> 19 const host = document.getElementById("host"); 20 test(function (t) { 21 assert_equals( 22 host.shadowRoot.adoptedStyleSheets.length, 23 1, 24 "The shadowrootadoptedstylesheets will declaratively import named specifiers into the adoptedStyleSheets array.", 25 ); 26 27 }, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute."); 28 const test_element = host.shadowRoot.getElementById("test_element"); 29 30 test(function (t) { 31 assert_equals(getComputedStyle(test_element) 32 .color, "rgb(0, 0, 255)", 33 "Declarative styles were applied."); 34 35 }, "Styles from the adoptedStyleSheets are applied to elements."); 36 </script>