为什么它不循环循环(JavaScript、Class、ShadowDOM、HTML 模板标签)

发布于09月23日

      class Product extends HTMLElement {
        connectedCallback() {
          let products = [
            { name: "carrot", price: "$ 6.99" },
            { name: "blueberry", price: "$ 6.99" }
          ];

          let pro = document.querySelector("#product_item").content;
          let copyHTML = document.importNode(pro, true);

          for (let product of products) {
            copyHTML.querySelector(".cerealName").textContent = product.name;
            this.attachShadow({ mode: "open" });
            this.shadowRoot.append(copyHTML.cloneNode(true));
          }
        }
      }
      customElements.define("product-item", Product);

    <main>
      <product-item></product-item>
      <product-item></product-item>
    </main>

    <template id="product_item">
      <li class="cereal">
        <p class="cerealName" style="font-size: 3rem"></p>
      </li>
    </template>

我原以为结果会是

胡萝卜蓝莓

但结果是伴随着

胡萝卜胡萝卜

我似乎不能运行循环，你能告诉我为什么吗？

推荐答案

您只需拨打attachShadow一次-之后它会生成一个错误:

无法对‘Element’执行‘attachShadow’:无法在已承载卷影树的主机上创建卷影根.

您还只需要一个<product-item>元素.

      class Product extends HTMLElement {
        connectedCallback() {
          let products = [
            { name: "carrot", price: "$ 6.99" },
            { name: "blueberry", price: "$ 6.99" }
          ];

          let pro = document.querySelector("#product_item").content;
          let copyHTML = document.importNode(pro, true);
          this.attachShadow({ mode: "open" });
          for (let product of products) {
            copyHTML.querySelector(".cerealName").textContent = product.name;
            this.shadowRoot.append(copyHTML.cloneNode(true));
          }
        }
      }
      customElements.define("product-item", Product);

    <main>
      <product-item></product-item>
    </main>

    <template id="product_item">
      <li class="cereal">
        <span class="cerealName" style="font-size: 1.3rem"></span>
      </li>
    </template>