ShadowRoot-innerHTML.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /custom-elements/revamped-scoped-registry/ShadowRoot-innerHTML.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">

<link rel="help" href="https://github.com/whatwg/html/issues/10854">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

</head>

<body>

<script>

function createConnectedShadowTree(test, customElements) {

    const host = document.createElement('div');

    const shadowRoot = host.attachShadow({mode: 'closed', customElements});

    document.body.appendChild(host);

    test.add_cleanup(() => host.remove());

    return shadowRoot;

test((test) => {

    const registry = new CustomElementRegistry;

    class SomeElement extends HTMLElement { };

    registry.define('some-element', SomeElement);

    class OtherElement extends HTMLElement { };

    registry.define('other-element', OtherElement);

    const shadowRoot = createConnectedShadowTree(test, registry);

    assert_true(document.createElement('some-element', {customElements: registry}) instanceof SomeElement);

    assert_true(document.createElement('other-element', {customElements: registry}) instanceof OtherElement);

    shadowRoot.innerHTML = '<some-element></some-element><other-element></other-element>';

    assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement);

    assert_equals(shadowRoot.querySelector('some-element').customElements, registry);

    assert_true(shadowRoot.querySelector('other-element') instanceof OtherElement);

    assert_equals(shadowRoot.querySelector('other-element').customElements, registry);

}, 'innerHTML on a shadow root should use the scoped registry');

test((test) => {

    class SomeElement1 extends HTMLElement { };

    customElements.define('some-element', SomeElement1);

    const registry = new CustomElementRegistry;

    class SomeElement2 extends HTMLElement { };

    registry.define('some-element', SomeElement2);

    const shadowRoot = createConnectedShadowTree(test, registry);

    shadowRoot.innerHTML = '<some-element></some-element>';

    assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement2);

    assert_equals(shadowRoot.querySelector('some-element').customElements, registry);

}, 'innerHTML on a connected shadow root should use the associated scoped registry');

test((test) => {

    const registry = new CustomElementRegistry;

    class SomeElement extends HTMLElement { };

    registry.define('some-element', SomeElement);

    const shadowRoot = createConnectedShadowTree(test, registry);

    shadowRoot.innerHTML = '<some-element></some-element><template><some-element></some-element></template>';

    assert_equals(shadowRoot.querySelector('some-element').__proto__.constructor.name, 'SomeElement');

    assert_equals(shadowRoot.querySelector('some-element').customElements, registry);

    assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');

    assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').customElements, null);

}, 'innerHTML on a connected shadow root should not upgrade a custom element inside a template element');

test((test) => {

    const registry = new CustomElementRegistry;

    const shadowRoot = createConnectedShadowTree(test, registry);

    shadowRoot.innerHTML = '<someelement></someelement>';

    assert_equals(shadowRoot.querySelector('someelement').__proto__.constructor.name, 'HTMLUnknownElement');

    assert_equals(shadowRoot.querySelector('someelement').customElements, registry);

}, 'innerHTML on a connected shadow root should be able to create an unknown element');

</script>

</body>

</html>