如何使用vanilla js标记自包含自定义元素中的模板？ [英] How to stamp out template in self contained custom elements with vanilla js?
问题描述
我有一个只显示塔罗牌的自定义组件。
在自定义元素之前我定义了一个模板。
在我的wc的connectedCallback中，我将模板本身附加到shadowroot，然后通过在shadowroot中克隆它来将其标记出来。我这样做有两个原因：
I have a custom component that just shows a tarot card.
Before the custom element I have defined a template.
In my wc's connectedCallback I attached the template itself to the shadowroot and then stamped it out by cloning it there in the shadowroot as well. I did this for 2 reasons:
- 我希望我的wc组件是一个自包含的模块;因此，我想在与自定义元素相同的位置定义我的模板。
-
这似乎是唯一的方法来删除我的模板以使其可用而不会粘在所有者文档。
- I want my wc component to be a self contained module; therefore I want to define my template in the same place as my custom element.
It seems to be the only way to stamp out my template to make it usable without sticking it in an owner document.
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);
这产生的问题是每张塔罗牌我在我的页面上使用的组件具有相同的模板是一个孩子，都具有相同的ID。既然他们处于阴影中，那重要吗？闻起来很有趣......
The problem this has created is every tarot card component I use on my page has the same template is a child, all with the same id. Since they're in the shadowroot, does it matter? Smells funny though...
我的目标只是试图了解网络组件规格如何融合在一起。我的问题是，有没有更好的方法来保持我的组件代码在一起，而不是返回到所有者文档？模板规范是否与自定义元素大多不兼容，因为大多数浏览器供应商都没有采用html导入？
My goal is simply trying to understand how the web components specs all fit together. My question is, is there a better way to do this that keeps my component code together and doesn't refer back to an owner doc? Is the template spec mostly incompatible with custom elements since html imports are not being adopted by most browser vendors?
推荐答案
简而言之：如果你使用模板文字然后你不应该使用 < template> 元素。
In a nutshell: if you use template literals then you shouldn't use <template> element.
您无需复制模板即可将自定义元素和模板代码保持在一起。
You don't need to duplicate the template to keep the custom element and template codes together.
您只需将代码放入自我中即可。执行函数以确保不会覆盖tmpl变量。
You can simply enclose your code in a self-executed function to be sure that the tmpl variable won't be overridden.
(function () {
var 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>`;
class BdTarot extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
.innerHTML = tmpl;
}
}
customElements.define('bd-tarot', BdTarot);
})()
<bd-tarot>
<span slot="title">Queen</span>
</bd-tarot>
如果要保留模板的本地副本，可以将其复制到实例变量中（ this .tmpl ）。
If you want to keep a local copy of the template, you can copy it in an instance variable (this.tmpl).
这篇关于如何使用vanilla js标记自包含自定义元素中的模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
