declarative-shadow-dom-basic.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>Declarative Shadow DOM</title>

<link rel="author" href="mailto:masonf@chromium.org">

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

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

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

<div id="host" style="display:none">

  <template shadowrootmode="open">

    <slot id="s1" name="slot1"></slot>

  </template>

  <div id="c1" slot="slot1"></div>

</div>

<script>

// Uncaught exceptions (which will manifest as test harness

// errors) constitute a failure of this test. No parsing

// operations, whether imperative (setHTMLUnsafe) or declarative

// (main document parsing) should ever throw exceptions.

// More context:

// https://github.com/whatwg/html/issues/10527#issuecomment-2275253439

test(() => {

  const host = document.querySelector('#host');

  const c1 = host.querySelector('#c1');

  assert_true(!!c1);

  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");

  assert_equals(host.querySelector('template'), null, "No leftover template node");

  assert_true(!!host.shadowRoot,"No shadow root found");

  const s1 = host.shadowRoot.querySelector('#s1');

  assert_equals(c1.assignedSlot, s1);

  assert_array_equals(s1.assignedNodes(), [c1]);

}, 'Declarative Shadow DOM: Basic test');

test(() => {

  assert_true(HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode"),'Unable to feature detect');

}, 'Declarative Shadow DOM: Feature detection');

test(() => {

  const t = document.createElement('template');

  t.setAttribute('shadowrootmode','open');

  assert_equals(t.shadowRootMode,'open','The shadowRootMode IDL should reflect the content attribute');

  t.setAttribute('shadowrootmode','closed');

  assert_equals(t.shadowRootMode,'closed','"open" and "closed" should both be valid values');

  t.setAttribute('shadowrootmode','OpEn');

  assert_equals(t.shadowRootMode,'open','Case insensitive');

  t.setAttribute('shadowrootmode','INVALID');

  assert_equals(t.shadowRootMode,'','Invalid values map to empty string');

  t.removeAttribute('shadowrootmode');

  assert_equals(t.shadowRootMode,'','No shadowrootmode attribute maps to empty string');

}, 'Shadowrootmode reflection');

test(() => {

  const t = document.createElement('template');

  t.shadowRootMode = 'blah';

  assert_equals(t.shadowRootMode, '');

  t.getAttribute('shadowrootmode', 'blah');

  t.shadowRootMode = 'CLOSED';

  assert_equals(t.shadowRootMode, 'closed');

  t.getAttribute('shadowrootmode', 'CLOSED');

}, 'Shadowrootmode reflection, setter');

test(() => {

  const t = document.createElement('template');

  t.setAttribute('shadowrootdelegatesfocus','');

  assert_equals(t.shadowRootDelegatesFocus,true,'The shadowRootDelegatesFocus IDL should reflect the content attribute');

  t.setAttribute('shadowrootdelegatesfocus','foobar');

  assert_equals(t.shadowRootDelegatesFocus,true,'The value doesn\'t matter');

  t.removeAttribute('shadowrootdelegatesfocus');

  assert_equals(t.shadowRootDelegatesFocus,false,'No shadowRootDelegatesFocus attribute maps to false');

}, 'Shadowrootdelegatesfocus reflection');

test(() => {

  const t = document.createElement('template');

  assert_equals(t.getAttribute('shadowrootdelegatesfocus'), null);

  t.shadowRootDelegatesFocus = true;

  assert_equals(t.getAttribute('shadowrootdelegatesfocus'), '');

  assert_equals(t.shadowRootDelegatesFocus, true);

  t.shadowRootDelegatesFocus = false;

  assert_equals(t.getAttribute('shadowrootdelegatesfocus'), null);

  assert_equals(t.shadowRootDelegatesFocus, false);

}, 'Shadowrootdelegatesfocus reflection, setter');

test(() => {

  const t = document.createElement('template');

  t.setAttribute('shadowrootclonable','');

  assert_equals(t.shadowRootClonable,true,'The shadowRootClonable IDL should reflect the content attribute');

  t.setAttribute('shadowrootclonable','foobar');

  assert_equals(t.shadowRootClonable,true,'The value doesn\'t matter');

  t.removeAttribute('shadowrootclonable');

  assert_equals(t.shadowRootClonable,false,'No shadowRootClonable attribute maps to false');

}, 'Shadowrootclonable reflection');

test(() => {

  const t = document.createElement('template');

  assert_equals(t.getAttribute('shadowrootclonable'), null);

  t.shadowRootClonable = true;

  assert_equals(t.getAttribute('shadowrootclonable'), '');

  assert_equals(t.shadowRootClonable, true);

  t.shadowRootClonable = false;

  assert_equals(t.getAttribute('shadowrootclonable'), null);

  assert_equals(t.shadowRootClonable, false);

}, 'Shadowrootclonable reflection, setter');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open">

        <slot id="s1" name="slot1"></slot>

      </template>

      <div id="c1" slot="slot1"></div>

    </div>

`);

  const host = div.querySelector('#host');

  const c1 = host.querySelector('#c1');

  assert_true(!!c1);

  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");

  assert_equals(host.querySelector('template'), null, "No leftover template node");

  assert_true(!!host.shadowRoot,"No shadow root found");

  const s1 = host.shadowRoot.querySelector('#s1');

  assert_equals(c1.assignedSlot, s1);

  assert_array_equals(s1.assignedNodes(), [c1]);

}, 'Declarative Shadow DOM: Fragment parser basic test');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="invalid">

      </template>

    </div>

`);

  const host = div.querySelector('#host');

  assert_equals(host.shadowRoot, null, "Shadow root was found");

  const tmpl = host.querySelector('template');

  assert_true(!!tmpl,"Template should still be present");

  const shadowrootAttr = tmpl.getAttribute('shadowrootmode');

  assert_equals(shadowrootAttr,"invalid","'shadowrootmode' attribute should still be present");

}, 'Declarative Shadow DOM: Invalid shadow root attribute');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="closed">

      </template>

    </div>

`);

  const host = div.querySelector('#host');

  assert_equals(host.shadowRoot, null, "Closed shadow root");

  assert_equals(host.querySelector('template'), null, "No template - converted to shadow root");

}, 'Declarative Shadow DOM: Closed shadow root attribute');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open">

        <slot id="s1" name="slot1"></slot>

    </div>

`);

  const host = div.querySelector('#host');

  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");

  assert_equals(host.querySelector('template'), null, "No leftover template node");

  assert_true(!!host.shadowRoot,"No shadow root found");

  const s1 = host.shadowRoot.querySelector('#s1');

  assert_true(!!s1,"Slot should be inside the shadow root");

}, 'Declarative Shadow DOM: Missing closing tag');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open" shadowrootdelegatesfocus>

      </template>

    </div>

`);

  var host = div.querySelector('#host');

  assert_true(!!host.shadowRoot,"No shadow root found");

  assert_true(host.shadowRoot.delegatesFocus,"delegatesFocus should be true");

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open">

      </template>

    </div>

`);

  host = div.querySelector('#host');

  assert_true(!!host.shadowRoot,"No shadow root found");

  assert_false(host.shadowRoot.delegatesFocus,"delegatesFocus should be false without the shadowrootdelegatesfocus attribute");

}, 'Declarative Shadow DOM: delegates focus attribute');

test(() => {

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

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open" shadowrootclonable>

      </template>

    </div>

`);

  var host = div.querySelector('#host');

  assert_true(!!host.shadowRoot,"No shadow root found");

  assert_true(host.shadowRoot.clonable,"clonable should be true");

  div.setHTMLUnsafe(`

    <div id="host">

      <template shadowrootmode="open">

      </template>

    </div>

`);

  host = div.querySelector('#host');

  assert_true(!!host.shadowRoot,"No shadow root found");

  assert_false(host.shadowRoot.clonable,"clonable should be false without the shadowrootclonable attribute");

}, 'Declarative Shadow DOM: clonable attribute');

</script>

<div id="multi-host" style="display:none">

  <template shadowrootmode="open">

    <span>root 1</span>

  </template>

  <template shadowrootmode="closed">

    <span>root 2</span>

  </template>

</div>

<script>

test(() => {

  const host = document.querySelector('#multi-host');

  const leftover = host.querySelector('template');

  assert_true(!!leftover, "The second (duplicate) template should be left in the DOM");

  assert_true(leftover instanceof HTMLTemplateElement);

  assert_equals(leftover.getAttribute('shadowrootmode'),"closed");

  assert_equals(leftover.shadowRootMode,"closed");

  assert_true(!!host.shadowRoot,"No open shadow root found - first root should remain");

  const innerSpan = host.shadowRoot.querySelector('span');

  assert_equals(innerSpan.textContent, 'root 1', "Content should come from first declarative shadow root");

}, 'Declarative Shadow DOM: Multiple roots');

</script>

<template id="template-containing-shadow">

  <div class="innerdiv">

    <template shadowrootmode=open shadowrootclonable>Content</template>

  </div>

</template>

<script>

test(() => {

  const template = document.querySelector('#template-containing-shadow');

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

  container1.style.display = 'none';

  document.body.appendChild(container1);

  container1.appendChild(template.content.cloneNode(true));

  let innerDiv = container1.querySelector('div.innerdiv');

  const shadowRoot1 = innerDiv.shadowRoot;

  assert_true(!!shadowRoot1,"Inner div should have a shadow root");

  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

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

  container2.style.display = 'none';

  document.body.appendChild(container2);

  container2.appendChild(template.content.cloneNode(true));

  innerDiv = container2.querySelector('div.innerdiv');

  const shadowRoot2 = innerDiv.shadowRoot;

  assert_true(!!shadowRoot2,"Inner div should have a shadow root");

  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

  assert_not_equals(shadowRoot1,shadowRoot2,'Should not get back the same shadow root');

  // Make sure importNode also works.

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

  container3.style.display = 'none';

  document.body.appendChild(container3);

  container3.appendChild(document.importNode(template.content,true));

  innerDiv = container3.querySelector('div.innerdiv');

  const shadowRoot3 = innerDiv.shadowRoot;

  assert_true(!!shadowRoot3,"Inner div should have a shadow root");

  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

  assert_not_equals(shadowRoot1,shadowRoot3,'Should not get back the same shadow root');

}, 'Declarative Shadow DOM: template containing declarative shadow root (with shadowrootclonable)');

</script>

<template id="template-containing-deep-shadow">

  <div><div><div><div><div>

    <div class="innerdiv">

      <template shadowrootmode=open shadowrootclonable>Content</template>

    </div>

  </div></div></div></div></div>

</template>

<script>

test(() => {

  const template = document.querySelector('#template-containing-deep-shadow');

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

  host.style.display = 'none';

  document.body.appendChild(host);

  host.appendChild(template.content.cloneNode(true));

  assert_true(!!host.querySelector('div.innerdiv').shadowRoot,"Inner div should have a shadow root");

}, 'Declarative Shadow DOM: template containing (deeply nested) declarative shadow root');

</script>

<template id="template-containing-template">

  <div>

    <template id="inner-template">

      <div class="innerdiv">

        <template shadowrootmode=open shadowrootclonable>Content</template>

      </div>

    </template>

  </div>

</template>

<script>

test(() => {

  const template = document.querySelector('#template-containing-template');

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

  host.style.display = 'none';

  document.body.appendChild(host);

  host.appendChild(template.content.cloneNode(true));

  const innerTemplate = host.querySelector('#inner-template');

  assert_true(!!innerTemplate.content.querySelector('div.innerdiv').shadowRoot,"Inner div should have a shadow root");

}, 'Declarative Shadow DOM: template containing a template containing declarative shadow root');

</script>

<template id="template-containing-ua-shadow">

  <div class="innerdiv">

    <template shadowrootmode=open shadowrootclonable>

      <video></video> <!--Assumed to have UA shadow root-->

    </template>

  </div>

</template>

<script>

test(() => {

  const template = document.querySelector('#template-containing-ua-shadow');

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

  host.style.display = 'none';

  document.body.appendChild(host);

  // Mostly make sure clone of template *does* clone the

  // shadow root, and doesn't crash on cloning the <video>.

  host.appendChild(template.content.cloneNode(true));

  let innerDiv = host.querySelector('div.innerdiv');

  const shadowRoot = innerDiv.shadowRoot;

  assert_true(!!shadowRoot,"Inner div should have a shadow root");

  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

  assert_true(!!innerDiv.shadowRoot.querySelector('video'),'Video element should be present');

}, 'Declarative Shadow DOM: template containing declarative shadow root and UA shadow root');

</script>

<template id="template-containing-ua-shadow-closed">

  <div class="innerdiv">

    <template shadowrootmode=closed>

      <video></video> <!--Assumed to have UA shadow root-->

    </template>

  </div>

</template>

<script>

test(() => {

  const template = document.querySelector('#template-containing-ua-shadow-closed');

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

  host.style.display = 'none';

  document.body.appendChild(host);

  host.appendChild(template.content.cloneNode(true));

  let innerDiv = host.querySelector('div.innerdiv');

  assert_true(!innerDiv.shadowRoot,"Inner div should have a closed shadow root");

}, 'Declarative Shadow DOM: template containing closed declarative shadow root and UA shadow root');

</script>

<template id="root-element-shadow">

    <template shadowrootmode=open>Content</template>

</template>

<script>

test(() => {

  // Root element of this template is a <template shadowroot>:

  const template = document.querySelector('#root-element-shadow');

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

  host.appendChild(template.content.cloneNode(true));

  assert_equals(host.shadowRoot, null, "Shadow root should not be present");

  const tmpl = host.querySelector('template');

  assert_true(!!tmpl,"Template should still be present");

  assert_equals(tmpl.getAttribute('shadowrootmode'),"open","'shadowrootmode' attribute should still be present");

}, 'Declarative Shadow DOM: declarative shadow roots are not supported by the template element');

</script>

<script>

  let gotError = false;

  window.addEventListener('error',() => {gotError = true;});

</script>

<progress id="invalid-element-exception">

  <template shadowrootmode=open>Content</template>

</progress>

<script>

test(() => {

  assert_false(gotError,'Exceptions should not be thrown by the parser');

  const host = document.querySelector('#invalid-element-exception');

  const leftover = host.querySelector('template');

  assert_true(!host.shadowRoot,"Progress elements don't allow shadow roots");

  assert_true(!!leftover, "The template should be left in the DOM");

  // This also should not throw exceptions:

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

  document.body.appendChild(div);

  div.setHTMLUnsafe('<progress><template shadowrootmode=open></template></progress>');

  assert_false(gotError,'Exceptions should not be thrown by the parser');

  assert_true(!!div.querySelector('template'),'parsing should have succeeded and left the template child');

  host.remove();

  div.remove();

}, 'Declarative Shadow DOM: explicit test that exceptions are not thrown');

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: