javascript-如何使用自定义元素将子自定义元素包装到div中

我正在尝试创建将其子自定义元素包装到div中的包装自定义元素.

但是子元素没有包装.而是在子元素之前将空div插入wrapper元素中

<script>
  class ListItem extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.innerHTML = "<div>ListItem</div>";
    }
  }

  class List extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.innerHTML = `<div class="list">${this.innerHTML}</div>`;
    }
  }

  customElements.define("list-item", ListItem);
  customElements.define("my-list", List);
</script>

<my-list>
  <list-item></list-item>
  <list-item></list-item>
  <list-item></list-item>
</my-list>

结果如下：

<my-list>
  <div class="list"></div>
  <list-item><div>ListItem</div></list-item>
  <list-item><div>ListItem</div></list-item>
  <list-item><div>ListItem</div></list-item>
</my-list>

我本来期望以下几点：

<my-list>
  <div class="list">
    <list-item><div>ListItem</div></list-item>
    <list-item><div>ListItem</div></list-item>
    <list-item><div>ListItem</div></list-item>
  </div>
</my-list>

您可以尝试here.

解决方法:

这是由于解析执行顺序.当< my-list>检测到标记后,将在插入其子代之前立即创建(并连接)该标记.

因此,${this.innerHTML}将在connectedCallback()中返回一个空字符串.

您可以等待子项被解析,例如借助setTimeout()：

class List extends HTMLElement {
    connectedCallback() {
        setTimeout( () => 
            this.innerHTML = `<div class="list">${this.innerHTML}</div>` 
        )
    }
}

但是您最好将Shadow DOM与< slot>一起使用.插入轻型DOM的元素：

class List extends HTMLElement {
    connectedCallback() {
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<div class="list"><slot></slot></div>` 
    }
}

请参见下面的示例.

class ListItem extends HTMLElement {
    connectedCallback() {
        this.innerHTML = "<div>ListItem</div>";
    }
}

class List extends HTMLElement {
    connectedCallback() {
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<div class="list"><slot></slot></div>` 
    }
}

customElements.define("list-item", ListItem);
customElements.define("my-list", List);

<my-list>
    <list-item></list-item>
    <list-item></list-item>
    <list-item></list-item>
</my-list>

标签：dom,web-component,custom-element,javascript
来源： https://codeday.me/bug/20191108/2006851.html