Javascript 如何使用vanilla js在自包含的自定义元素中消除模板？

我有一个自定义组件，只显示塔罗牌。 在自定义元素之前，我定义了一个模板。
在我的wc的connectedCallback中，我将模板本身附加到shadowroot，然后通过在shadowroot中克隆模板将其压印出来。我这样做有两个原因：

我希望我的wc组件是一个独立的模块；因此，我希望在自定义元素所在的位置定义模板

这似乎是在不将模板粘贴到所有者文档中的情况下消除模板以使其可用的唯一方法

var tmpl = `
    <template id="tmpl">
    <h1 class="tarot-title"><slot name="title">NEED TITLE</slot>
    </h1>
    <img src="${this.imageurl}" alt="">
    <p><slot name="subtitle">NEED A SUBTITLE</slot></p>
</template>`;



class BdTarot extends HTMLElement {

    ...constructor etc...

    connectedCallback() {
        this._shadowRoot.innerHTML = tmpl;
        var _tmpl = this._shadowRoot.querySelector('#tmpl');
        this._shadowRoot.appendChild(_tmpl.content.cloneNode(true));

    }

}

customElements.define('bd-tarot', BdTarot);

var tmpl=`
需要头衔
需要字幕吗

`;
类BdTarot扩展了HtmleElement{
…构造函数等。。。
connectedCallback（）{
这是。_shadowRoot.innerHTML=tmpl；
var#tmpl=this._shadowRoot.querySelector（'#tmpl'）；
这个._shadowRoot.appendChild（_tmpl.content.cloneNode（true））；
}
}
自定义元素。定义（'bd-tarot'，BdTarot）；

这造成的问题是，我在页面上使用的每个塔罗牌组件都有相同的模板，都是一个子组件，都具有相同的id。因为它们位于shadowroot中，这有关系吗？但闻起来很好笑

我的目标只是试图理解web组件规范是如何组合在一起的。我的问题是，有没有更好的方法来做到这一点，使我的组件代码保持在一起，而不引用所有者文档？由于大多数浏览器供应商不采用html导入，模板规范是否大部分与自定义元素不兼容

简而言之：如果您使用，那么就不应该使用元素

无需复制模板即可将自定义元素和模板代码保持在一起

您可以简单地将代码封装在一个自执行函数中，以确保tmpl变量不会被重写

（函数（）{
var tmpl=`
需要头衔
需要字幕
`；
类BdTarot扩展了HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
.innerHTML=tmpl；
}
}
自定义元素。定义（'bd-tarot'，BdTarot）；
})（）

女王

虽然我同意@Supersharp的说法，即模板文字和模板不应一起使用，但我认为有一种更好的方法来管理组件的HTML模板，可以在某种程度上混合使用您的方法

本质上，我们不应该处理字符串或模板文本，而应该定义一次

模板

，然后在每个组件的实例创建时从那里注入它

const template=document.createElement（'template'）；
template.innerHTML=`
需要头衔

需要字幕吗

`;
define（'bd-tarot'，类扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）
.appendChild（template.content.cloneNode（true））；
}
})();

我写过类似的文章，还提到了我自己的库，它将上述大部分样板文件包装成了几个API