| <!DOCTYPE html> |
| <title>Custom Elements: create an element inside a template </title> |
| <link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/custom-elements-helpers.js"></script> |
| <iframe id="iframe"></iframe> |
| <script> |
| 'use strict'; |
| |
| // A document`s browsing context only afffects the look up result of custom element definition |
| // https://html.spec.whatwg.org/#look-up-a-custom-element-definition |
| // There are two places where we need to look up a custom element definition: |
| // 1. creating an element |
| // https://dom.spec.whatwg.org/#concept-create-element |
| // 2. trying to upgrade an element |
| // https://html.spec.whatwg.org/#concept-try-upgrade |
| // The previous observation leads to the following behaviours: |
| // 1. an element in a document without browsing context should not be upgraded |
| // 2. a custom element cannot be created in a document without browsing context |
| // 3. an already "defined" custom element should remain "defined" after being inserted |
| // into a document without browsing context |
| |
| test_with_window(w => { |
| let doc_without_browsing_context = w.document.implementation.createHTMLDocument(); |
| let element = doc_without_browsing_context.createElement('a-a'); |
| w.customElements.define('a-a', class extends w.HTMLElement {}); |
| doc_without_browsing_context.body.appendChild(element); |
| assert_true(element.matches(':not(:defined)')); |
| w.document.body.appendChild(element); |
| assert_true(element.matches(':defined')); |
| }, 'An element should not upgraded in a document without browsing context'); |
| |
| test_with_window(w => { |
| let doc_without_browsing_context = w.document.implementation.createHTMLDocument(); |
| w.customElements.define('b-b', class extends w.HTMLElement {}); |
| let e1 = doc_without_browsing_context.createElement('b-b'); |
| assert_true(e1.matches(':not(:defined)')); |
| let e2 = w.document.createElement('b-b'); |
| assert_true(e2.matches(':defined')); |
| }, 'Custom element should not be created in a document without browsing context'); |
| |
| test_with_window(w => { |
| w.customElements.define('a-a', class extends w.HTMLElement {}); |
| let element = w.document.createElement('a-a'); |
| assert_true(element.matches(':defined')); |
| let doc_without_browsing_context = w.document.implementation.createHTMLDocument(); |
| doc_without_browsing_context.body.appendChild(element); |
| let inserted_element = doc_without_browsing_context.body.querySelector('a-a'); |
| assert_true(inserted_element.matches(':defined')); |
| }, 'Inserting an already defined custom element into a document without browsing context ' + |
| 'should not change its state'); |
| </script> |
