shadowrootadoptedstylesheets-fetched-module.html (1899B)
1 <!DOCTYPE html> 2 <title>Basic shadowrootadoptedstylesheets support on <template></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 <body> 8 <script type="module"> 9 // Import a module so it's in the module map. 10 import("./support/styles.css", { with: { type: "css" } }).then((sheet) => { 11 // Setting 'shadowrootadoptedstylesheets' to the same specifier should appliy it immediately. 12 // Use setHTMLUnsafe, as declarative shadow DOM's don't get created via CreateElement or innerHTML. 13 document.body.setHTMLUnsafe( 14 "<div id='host'>" + 15 "<template shadowrootmode='open' shadowrootadoptedstylesheets='./support/styles.css'>" + 16 "<span id='test_element'>Test content</span>" + 17 "</template>" + 18 "</div>" 19 ); 20 21 const host = document.getElementById("host"); 22 test(function (t) { 23 assert_equals( 24 host.shadowRoot.adoptedStyleSheets.length, 25 1, 26 "The shadowrootadoptedstylesheets will declaratively import named specifiers into the adoptedStyleSheets array.", 27 ); 28 assert_equals( 29 host.shadowRoot.adoptedStyleSheets[0], 30 sheet.default, 31 "The CSSStyleSheet imported imperatively matches the one imported declaratively.", 32 ); 33 }, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute."); 34 35 const test_element = host.shadowRoot.getElementById("test_element"); 36 test(function (t) { 37 assert_equals(getComputedStyle(test_element) 38 .color, "rgb(0, 0, 255)", 39 "Declarative styles were applied."); 40 }, "Styles from the adoptedStyleSheets are applied to elements."); 41 }); 42 </script> 43 </body>