shadow-dom/declarative/script-access.tentative.html

<!DOCTYPE html>
<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>

<body>
<script>
let templatesSeen = 0;
function myObserver(mutationsList, observer) {
  for (let mutation of mutationsList) {
    for (let n of mutation.addedNodes) {
      if (n.localName === 'template') {
        templatesSeen++;
        switch (mutation.target.id) {
          case 'openhost':
          case 'closedhost':
            const shadowroot = n.getAttribute('shadowroot');
            assert_in_array(shadowroot, ['open','closed'], 'Declarative template should have shadowroot attribute');
            assert_equals(n.content, null, 'Declarative template content should be null');
            assert_equals(n.innerHTML, "", 'Declarative template innerHTML should be empty');
            assert_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Declarative template getInnerHTML() should be empty');

            // Make sure removing the shadowroot attribute doesn't affect things.
            n.removeAttribute('shadowroot');
            assert_equals(n.content, null, 'Declarative template content should *still* be null');
            assert_equals(n.innerHTML, "", 'Declarative template innerHTML should *still* be empty');
            assert_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Declarative template getInnerHTML() should *still* be empty');

            // Try cloning the in-progress declarative template - shouldn't work.
            const clone = n.cloneNode(true);
            assert_equals(clone.children.length,0,'Clone should not contain anything');
            assert_equals(clone.content.children.length,0,'Clone should not contain anything');
            break;
          case 'noroot':
            // Make sure adding 'shadowroot' attribute doesn't trigger a shadow root,
            // even if added before parsing completes.
            n.setAttribute('shadowroot','open');
            assert_not_equals(n.content, null, 'Regular template should have content, even after adding shadowroot attribute');
            assert_not_equals(n.innerHTML, "", 'Regular template should have innerHTML, even after adding shadowroot attribute');
            assert_not_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Regular template should have getInnerHTML(), even after adding shadowroot attribute');
            break;
          default:
            assert_unreached('Unrecognized template');
        }
      }
    }
  }
}
const observer = new MutationObserver(myObserver);
observer.observe(document.body, { childList: true, subtree: true });
assert_equals(templatesSeen, 0, 'No mutations yet');
</script>

<div id=openhost>
  <template shadowroot=open>
    <slot></slot>
  </template>
</div>

<div id=closedhost>
  <template shadowroot=closed>
    <slot></slot>
  </template>
</div>

<div id=noroot>
  <template>
    <slot></slot>
  </template>
</div>

<script>
test(t => {
  t.add_cleanup(function() { observer.disconnect(); });

  assert_equals(templatesSeen, 3);

  // Open shadow root
  let host = document.querySelector('#openhost');
  assert_equals(host.querySelector('template'), null, 'No leftover template node');
  assert_true(!!host.shadowRoot, 'Shadow root should exist');

  // Closed shadow root
  host = document.querySelector('#closedhost');
  assert_equals(host.querySelector('template'), null, 'No leftover template node');
  assert_true(!host.shadowRoot, 'Closed shadow root (can\'t detect)');

  // No shadow root
  host = document.querySelector('#noroot');
  assert_true(!!host.querySelector('template'), 'Template node still present');
  assert_true(!host.shadowRoot, 'No shadow root');
},'Declarative Shadow DOM: template .content() should be null');
</script>
</body>