如何使用vanilla js标记自包含自定义元素中的模板？-Java 学习之路

我有一个只显示塔罗牌的自定义组件 . 在自定义元素之前，我已经定义了一个模板 .
在我的wc的connectedCallback中，我将模板本身附加到阴影根，然后通过在阴影根中克隆它来将其标记出来 . 我这样做有两个原因：

我希望我的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);

这个问题就是我在我的页面上使用的每个tarot卡组件都有相同的模板是一个孩子，都具有相同的ID . 既然他们处于阴影中，那重要吗？闻起来很有趣......

我的目标只是试图了解Web组件规范如何组合在一起 . 我的问题是，有没有更好的方法来保持我的组件代码在一起，而不是返回到所有者文档？模板规范是否与自定义元素大多不兼容，因为大多数浏览器供应商都没有采用html导入？

1 回答

简而言之：如果您使用template literals，则不应使用<template>元素 .

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

您可以简单地将代码包含在自执行函数中，以确保不会覆盖tmpl变量 .

(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 ）中 .

回复于 2024-05-02T13:47:40+08:00

如何使用vanilla js标记自包含自定义元素中的模板？

1 回答

相关问题