setHTMLUnsafe-CEReactions.html (2797B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9957"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <body> 8 <script> 9 class MyElement extends HTMLElement { 10 constructor() { 11 super(); 12 this.numConnectedCallback = 0; 13 this.numDisconnectedCallback = 0; 14 this.attributeChangedCalls = []; 15 } 16 17 connectedCallback() { 18 this.numConnectedCallback++; 19 } 20 21 disconnectedCallback() { 22 this.numDisconnectedCallback++; 23 } 24 25 static observedAttributes = ['foo']; 26 attributeChangedCallback(name, oldValue, newValue) { 27 this.attributeChangedCalls.push({name, oldValue, newValue}); 28 } 29 } 30 customElements.define('my-element', MyElement); 31 32 ['Element', 'ShadowRoot'].forEach(containerType => { 33 test(() => { 34 let container = null; 35 if (containerType === 'Element') { 36 container = document.createElement('div'); 37 document.body.appendChild(container); 38 } else if (containerType === 'ShadowRoot') { 39 const host = document.createElement('div'); 40 document.body.appendChild(host); 41 container = host.attachShadow({mode: 'closed'}); 42 } 43 44 container.setHTMLUnsafe('<my-element>'); 45 const myElement1 = container.querySelector('my-element'); 46 assert_equals(myElement1.numConnectedCallback, 1, 47 'myElement1.numConnectedCallback after first setHTMLUnsafe.'); 48 assert_equals(myElement1.numDisconnectedCallback, 0, 49 'myElement1.numDisconnectedCallback after first setHTMLUnsafe.'); 50 assert_equals(JSON.stringify(myElement1.attributeChangedCalls), 51 JSON.stringify([]), 52 'myElement1.attributeChangedCalls after first setHTMLUnsafe.'); 53 54 container.setHTMLUnsafe('<my-element foo=bar>'); 55 const myElement2 = container.querySelector('my-element'); 56 assert_equals(myElement1.numConnectedCallback, 1, 57 'myElement1.numConnectedCallback after second setHTMLUnsafe.'); 58 assert_equals(myElement1.numDisconnectedCallback, 1, 59 'myElement1.numDisconnectedCallback after second setHTMLUnsafe.'); 60 assert_array_equals(myElement1.attributeChangedCalls, [], 61 'myElement1.attributeChangedCalls after second setHTMLUnsafe.'); 62 assert_equals(myElement2.numConnectedCallback, 1, 63 'myElement2.numConnectedCallback after second setHTMLUnsafe.'); 64 assert_equals(myElement2.numDisconnectedCallback, 0, 65 'myElement2.numDisconnectedCallback after second setHTMLUnsafe.'); 66 assert_equals(JSON.stringify(myElement2.attributeChangedCalls), 67 JSON.stringify([{name: 'foo', oldValue: null, newValue: 'bar'}]), 68 'myElement2.attributeChangedCalls after second setHTMLUnsafe.'); 69 }, `${containerType}.setHTMLUnsafe should trigger custom element reactions.`); 70 }); 71 </script>