0

I have a Handlebars.js template with a HTML template to create Declarative Shadow DOM inside (required due to large content in actual case):

<script id="templatePreview" type="text/x-handlebars-template">
  <ul>
  {{#.}}
    <li>
      <template shadowroot="open">
        {{name}}
      </template>
    </li>
  {{/.}}
  </ul>
</script>

For some strange reason, it does not render using jQuery (v3.5.x or latest 3.6.x) in latest Chrome (v91) or Firefox (v89):

<script>
const data = [{
    name: "John"
  },
  {
    name: "Peter"
  },
  {
    name: "Mark"
  },
];

$(function() {
  let templatePreview = Handlebars.compile($('#templatePreview').html());

  $("#main").append(templatePreview(data));
});
</script>

Here's a test JS bin: https://jsbin.com/bocenoqovi/edit?html,js,output

Chrome DevTools console shows the message below, but I'm not sure how to resolve this issue:

Found declarative shadowroot attribute on a template, but declarative Shadow DOM has not been enabled by includeShadowRoots.
Nick
  • 1,365
  • 2
  • 18
  • 37
  • 1
    Declarative shadowDOM with ``shadowroot="open"`` is a Chrome only, NON-standard technology. So try adding shadowDOM the standard way; as described in the blog post you refer to: https://web.dev/declarative-shadow-dom/ If you think it should work report it at the source: https://github.com/whatwg/dom/issues/831 – Danny '365CSI' Engelman Jun 11 '21 at 09:01
  • Thanks Danny. I'm using the polyfill they've provided, which works for now, but it would've been great if at-least Chrome automatically processed Declarative Shadow DOM as stated in that article without the polyfill. Strangely, the given feature detection (`HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')`) returns `true` in Chrome, but you're right that `shadowroot="open/close"` seems Chrome only, yet doesn't automatically process Declarative Shadow DOM. – Nick Jun 12 '21 at 02:31

1 Answers1

2

Figured out the issue: Declarative Shadow DOM is processed and attached when the document is loaded. It will not work for post-load script generated content, like Handlebars.js templates, for which Shadow DOM must be attached using the polyfill.

Nick
  • 1,365
  • 2
  • 18
  • 37