element-mutation.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /custom-elements/registries/element-mutation.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Tests the registry assignment during element mutation</title>

<meta name="author" title="Jayson Chen" href="mailto:jaysonchen@microsoft.com"></meta>

<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">

<link rel="help" href="https://github.com/WICG/webcomponents/issues/923">

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

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

<body>

<div id="host">

    <div id="shadow-host-1">

        <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry>

            <div id="shadow-host-1-child"></div>

        </template>

    </div>

    <div id="shadow-host-2">

        <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry>

            <div id="shadow-host-2-child"></div>

        </template>

    </div>

</div>

<script>

test(() => {

    const registry = new CustomElementRegistry;

    const element = document.createElement('new-element');

    assert_equals(element.customElementRegistry, window.customElements);

    document.body.appendChild(element);

    const shadow = document.createElement('div').attachShadow({mode: 'open', customElementRegistry: registry})

    shadow.appendChild(element)

    assert_not_equals(element.customElementRegistry, registry);

    document.body.appendChild(element)

    assert_equals(element.customElementRegistry, window.customElements);

}, "An element with global registry should not change its registry when moved into a shadow tree with scoped registry.")

test(() => {

    const clone = host.cloneNode(true);

    const shadowRoot1 = clone.querySelector('#shadow-host-1').shadowRoot;

    const element = shadowRoot1.querySelector('#shadow-host-1-child');

    const registry1 = new CustomElementRegistry;

    registry1.initialize(shadowRoot1);

    assert_equals(element.customElementRegistry, registry1);

    document.querySelector('#host').appendChild(element);

    assert_equals(element.customElementRegistry, registry1);

}, "An element with scoped registry should not change its registry when moved out of the shadow tree.")

test(() => {

    const clone = host.cloneNode(true);

    const shadowRoot1 = clone.querySelector('#shadow-host-1').shadowRoot;

    const shadowRoot2 = clone.querySelector('#shadow-host-2').shadowRoot;

    const element = shadowRoot1.querySelector('#shadow-host-1-child');

    const registry1 = new CustomElementRegistry;

    const registry2 = new CustomElementRegistry;

    registry1.initialize(shadowRoot1);

    registry2.initialize(shadowRoot2);

    assert_equals(element.customElementRegistry, registry1);

    shadowRoot2.appendChild(element);

    assert_equals(element.customElementRegistry, registry1);

}, "An element with scoped registry should not change its registry when moved into another shadow tree with different scoped registry.")

</script>

</body>