Attached ShadowRoot Using Polyfill Is Not Query-able

In the following sample, I am trying to create a menu component to experiment component hierarchy. index.html

Solution 1:

As you stated, it seems that component hierarchy is not supported in the HTML Imports polyfill.

document.currentScript doesn't work either. The polyfill will copy the <template> in the main document for the 2 imported documents.

That's why when you query querySelector( 'template' ) in the mail document, it's nav-item's template which is returned, with no div.nav inside.

As a workaroud, you should be more specific when you query the <template>.

In site-navigtion.html:

<template id="site-navigation">
...
</template>
...
const shadowTemplate = currentDocument.querySelector('template#site-navigation').content.cloneNode(true);

Thus you'll get the right template, even in Firefox.

Note: document._currentScript doesn't seem to work any more with Polyfill v1.

Share