Shouldn't this be <imported-template>

[warpech]

Right now, this component is called <template is="imported-template>. It automatically stamps the first template found in the imported file.

This is a little bit weird because <template> is supposed to be inert and this element is not inert.

It is inspired by Polymer's 1.x <template is="dom-bind"> which does the same: https://www.polymer-project.org/1.0/docs/devguide/templates#dom-bind

Potential solutions:

1. Add an auto-stamp attribute. This makes it a more proper template by default.
2. Change to be <imported-template>.

In the end, this should be equivalent:

<!--  This doesn't stamp. You need to stamp it from the outside -->
<template is="imported-template" href="..."></template>

<!--  This stamps -->
<template is="imported-template" href="..." auto-stamp></template>

<!--  This stamps -->
<imported-template href="..."></imported-template>

<!--  This is stamped by Polymer -->
<dom-bind>
    <template is="imported-template" href="..."></template>
</dom-bind>

That's a long term proposal, but for me this would be much cleaner.

[tomalec]

I vote for 1. that's why I've created Juicy/juicy-html#10 long time ago.

Option 2. Is definitely not a way to go, as we need to stamp on the same level, to be able to distribute it within parent's Shadow DOM, not in <imported-template>s' one.

[warpech]

<imported-template> would stamp nodes as its siblings, not as children. <dom-bind> does that, too.

[tomalec]

You're right! (Sorry, I think in the beggining of 2.x-preview it wasn't so)

Then the only downside is that <dom-bind>/<imported-template> is a visual element, that by default has its rectangle taken part in rendering (before element is upgraded, or some CSS rule dom-bind{ display: none;} is provided). It's HTMLUnknownElement not HTMLTemplateElement.

Luckily since, we removed all the slot magic, filtering HTMLTemplateElements is no longer a problem.

However, I still think having a bit confusing (not so inert) <template is="" stamped> is cheeper than maintaining live integration between two elements <imported-template> and <template>.

At least for now, I will just make it cleaner by adding control on inertness/stamping via the attribute. And wait how the discussions on is attribute, on declarative shadow dom and about native template bindings will go this year.

[warpech]

@tomalec will make i-t an autonomous CEv1 with display: none in shadow root. The work is already started in https://github.com/Juicy/imported-template/tree/CEv1.

There is also some change that will need to be migrated to the CEv1 branch from the branch https://github.com/Juicy/imported-template/tree/Polymer2-friendly. @alshakero knows details.

We need a release candidate (can be without tests) ASAP.

[tomalec]

We have a yet another blocker in V1 - HTML Imports polyfill webcomponents/webcomponentsjs#872 :(

And this is pretty serious one, as we cannot get with lack of support for scripts in imported templates. It would simply disallow our app developers to use any JS (besides one wrapped in custom elements)

[alshakero]

Can imported-template eval them? Or maybe query-select and clone them into the main document?

[tomalec]

I'd rather querySelect and clone/recreate them in imported document.

That's the fix I have prepared for HTML Imports polyfill.

[warpech]

Closing as done in PR #38

[warpech]

Setting as “Finished” because it is:

• released (with release notes) https://github.com/Juicy/imported-template/releases/tag/3.0.0
• included in a Finished release of SCF https://github.com/Starcounter/StarcounterClientFiles/releases/tag/2.0.0