Javascript 不能多次使用Web组件_Javascript_Html_Web Component

Javascript 不能多次使用Web组件

javascript html

Javascript 不能多次使用Web组件,javascript,html,web-component,Javascript,Html,Web Component,我不熟悉香草javascript，因为我只有在reactjs方面的经验。我试图显示我在两个地方创建的web组件。但它只显示一次。这里有什么问题我的web组件 class MyComponent extends HTMLElement { constructor() { // always call super() first super(); console.log('constructed!'); } connecte

我不熟悉香草javascript，因为我只有在reactjs方面的经验。我试图显示我在两个地方创建的web组件。但它只显示一次。这里有什么问题

我的web组件

class MyComponent extends HTMLElement {
    constructor() {
        // always call super() first
        super();
        console.log('constructed!');
    }

    connectedCallback() {
        // console.log(this.getAttribute("filter"));
        this.innerHTML = `
          <html>
            <div id="templates" class="template_style">
              <template id="book-template">
                <li><span class="title"></span> &mdash; <span class="author"></span></li>
              </template>

             <ul id="books"></ul>
           </div>

         </html>
       `;
    }
}

customElements.define('my-component', MyComponent);

<div>

    <div class="sub_container">

        <label>Users in Debt</label>

        <input placeholder="Search by user name" class="input_style">

        <my-component filter="userdebt"></my-component>


    </div>

    <div class="sub_container">

        <label>Debts</label>

        <input placeholder="Search by debt description" class="input_style">

        <my-component filter="debt"></my-component>

    </div>

</div>

使用上述组件的HTML代码

class MyComponent extends HTMLElement {
    constructor() {
        // always call super() first
        super();
        console.log('constructed!');
    }

    connectedCallback() {
        // console.log(this.getAttribute("filter"));
        this.innerHTML = `
          <html>
            <div id="templates" class="template_style">
              <template id="book-template">
                <li><span class="title"></span> &mdash; <span class="author"></span></li>
              </template>

             <ul id="books"></ul>
           </div>

         </html>
       `;
    }
}

customElements.define('my-component', MyComponent);

<div>

    <div class="sub_container">

        <label>Users in Debt</label>

        <input placeholder="Search by user name" class="input_style">

        <my-component filter="userdebt"></my-component>


    </div>

    <div class="sub_container">

        <label>Debts</label>

        <input placeholder="Search by debt description" class="input_style">

        <my-component filter="debt"></my-component>

    </div>

</div>


负债用户
债务

如html代码所示，我在两个地方使用了

，但我只能看到第一个实例。我在组件的构造函数中使用了console.log，我可以看到它调用了2次。但从这个角度看，我只能看到第一个例子。如何修复此问题？

我已在codepen中重复了您的代码，它的工作正如您所期望的那样。生成两个组件。如果有错误，应该在其他地方检查错误。

不要在组件中使用静态ID，因为存在重复项。HTML标记也不需要使用。

您应该将

id

添加到web组件本身，以便可以使用父节点的

id

查询包含在其中的子节点

在您的代码中，当使用web组件子组件的

id

进行查询时，它为您获取了自您具有重复id以来的第一个id，在我的代码中，我为每个

标记了一个唯一的

id

，以便我只能查询其子组件：

类MyComponent扩展了HtmleElement{
构造函数（）{
//总是先调用super（）
超级（）；
console.log（'constructed！'）；
}
connectedCallback（）{
//log（this.getAttribute（“过滤器”）；
this.innerHTML=`
&mdash

`;
}
}
自定义元素。定义（'my-component'，MyComponent）；
const books=[{银行：“foo”，类别：“bar}]；
功能书（id）{
const comp=document.getElementById（id）；
//查询父web组件的子级
const booksList=comp.querySelector（“#books”）；
const fragment=comp.querySelector（“#书本模板”）；
//从ul中清除内容
booksList.innerHTML=''；
//在书本上循环并修改给定的模板
books.forEach（book=>{
//创建模板内容的实例
const instance=document.importNode（fragment.content，true）；
//将相关内容添加到模板中
instance.querySelector（'.title'）.innerHTML=book.bank；
instance.querySelector（'.author'）.innerHTML=book.category；
//将实例附加到DOM
booksList.appendChild（实例）；
});
}
函数addChangeListener（id）{
document.getElementById（id）
.querySelector（“#模板”）
.addEventListener（'change'，（事件）=>appendBooks（））；
}
附加账簿（“comp1”）//对于id为comp1的组件
附加账簿（“comp2”）//对于id为comp2的组件
addChangeListener（'comp1'）
addChangeListener（'comp2'）


负债用户
债务

标记内的内容不会呈现在DOM上。那么你怎么能说：但是它只显示一次呢？我已经包含了我的js代码，用于用数据填充模板。。你现在可以看一下吗？检查我的答案，让我知道它是否有效。如果你将代码转换成堆栈片段，每个人都可以内联运行它。请参阅：无需将代码复制/粘贴到CodePen或JSFIDdle。我已使用用于用json数据填充web组件的JS代码更新了问题。。你能看一下吗非常感谢。。你的解决方案是正确的。天才！