Question

这可能有点令人困惑。我试图从我的自定义元素访问innerHTML或childNodes。是否可以从Web组件导入文件访问原始DOM结构？在attachShadow之前？

在下面的例子中，我试图从我的jookah-gallery导入文件访问两个jookah-images的src。

免责声明：对于影子DOM和网络组件，我是一个完全的菜鸟，所以如果有任何重大错误，我很乐意理解为什么。谢谢你的帮助！

的index.html

<jookah-gallery>
    //here
    <jookah-image class="gallery-image" src="http://merehead.com/blog/wp-content/uploads/gradient-design.jpeg">
    <jookah-image class="gallery-image" src="https://webgradients.com/public/webgradients_png/035%20Itmeo%20Branding.png">
</jookah-gallery>

jookah-gallery的导入文件：

(function(owner) {

    class jookahGallery extends HTMLElement {

        constructor() {

            super();

            //this returns false
            if (this.hasChildNodes()) {
                console.log('there are nodes')
            }else{
                console.log('NO nodes')
            }

            //shadow DOM attach
            const shadowRoot = this.attachShadow({mode: 'open'});
            const template = owner.querySelector('#jookah-gallery-template');
            const instance = template.content.cloneNode(true);
            shadowRoot.appendChild(instance);


        }

        // ---------------- object events -------------------------//

        connectedCallback() {
        }

        render(){
        }

        disconnectedCallback(){
        }

        attributeChangedCallback(){
        }

        // ---------------- methods ------------------------//


    }

    customElements.define('jookah-gallery', jookahGallery);

})(document.currentScript.ownerDocument);

Answer 1

根据规范，您不应该在Web组件的构造函数中检查，更改，添加和子项。

https://w3c.github.io/webcomponents/spec/custom/#custom-element-conformance

相反，您需要将孩子的阅读内容移动到连接的回调中：

class jookahGallery extends HTMLElement {
  constructor() {
    super();
    this._childrenRead = false;

    const shadowRoot = this.attachShadow({mode: 'open'});
    const template = document.createElement('template');
    template.innerHtml = `Place your template here`;
    const instance = template.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }

  connectedCallback() {
    if (!this._childrenRead) {
      this._childrenRead = true;

      if (this.hasChildNodes()) {
          console.log('there are nodes')
      }else{
          console.log('NO nodes')
      }
    }
  }
}

customElements.define('jookah-gallery', jookahGallery);

您还可以使用<slot>来嵌入您的孩子。但是在使用插槽时，be aware of需要一些CSS问题。

请记住，所有浏览器都不支持shadowDOM，并且不是简单的polyfill。因此，如果您只是在使用Chrome和Safari，那就去吧。如果您计划支持更广泛的浏览器，那么您可能还不想使用ShadowDOM。

https://alligator.io/web-components/composing-slots-named-slots/

另请参阅此处：How to use child elements in Web Components

访问自定义元素的childNodes？

1 个答案: