slotchange-customelements.html (1910B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM: slotchange customelements</title> 5 <meta name="author" title="Surma" href="mailto:surma@google.com"> 6 <link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <slots-in-constructor id="constructor-upgrade"><div></div></slots-in-constructor> 12 <slots-in-callback id="callback-upgrade"><div></div></slots-in-callback> 13 <script> 14 var calls = []; 15 class SlotsInConstructor extends HTMLElement { 16 constructor() { 17 super(); 18 this.attachShadow({mode: 'open'}); 19 this.shadowRoot.innerHTML = '<slot></slot>'; 20 var slot = this.shadowRoot.children[0]; 21 slot.addEventListener('slotchange', function() { 22 calls.push(this.id); 23 }.bind(this)); 24 } 25 } 26 customElements.define('slots-in-constructor', SlotsInConstructor); 27 class SlotsInCallback extends HTMLElement { 28 constructor() { 29 super(); 30 } 31 32 connectedCallback() { 33 this.attachShadow({mode: 'open'}); 34 this.shadowRoot.innerHTML = '<slot></slot>'; 35 var slot = this.shadowRoot.children[0]; 36 slot.addEventListener('slotchange', function() { 37 calls.push(this.id); 38 }.bind(this)); 39 } 40 } 41 customElements.define('slots-in-callback', SlotsInCallback); 42 </script> 43 <slots-in-constructor id="constructor-parser"><div></div></slots-in-constructor> 44 <slots-in-callback id="callback-parser"><div></div></slots-in-callback> 45 <script> 46 test(function () { 47 assert_true(calls.includes("constructor-parser")); 48 assert_true(calls.includes("callback-parser")); 49 assert_true(calls.includes("constructor-upgrade")); 50 assert_true(calls.includes("callback-upgrade")); 51 }, 'slotchange must fire on initialization of custom elements with slotted children'); 52 done(); 53 </script> 54 </body> 55 </html>