访问自定义元素的子节点? [英] Accessing childNodes of custom elments?

问题描述

这可能有点令人困惑.我正在尝试从我的自定义元素访问 innerHTML 或 childNodes.是否可以从 Web 组件导入文件访问原始 DOM 结构?在附加阴影之前?

This might be a bit confusing. I am trying to access innerHTML or childNodes from my custom element. Is it possible to get access to the original DOM structure from the web component import file? BEFORE attachShadow?

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

In the below example I am trying to get access to the src of the two jookah-images from my jookah-gallery import file.

免责声明:当涉及到 shadow DOM 和 Web 组件时，我完全是个菜鸟，所以如果有任何重大错误，我很想了解原因.感谢您的帮助！

Disclaimer: Im a total noob when it comes to shadow DOM and web components so if there are any major mistakes I'd love to understand why. Thanks for any help!

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 的导入文件:

import file for 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);

推荐答案

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

According to the Spec you are not supposed to inspect, change, add and children in the constructor of your Web Component.

https://w3c.github.io/webcomponents/规范/自定义/#custom-element-conformance

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

Instead you need to move the reading of the children into your connected callback:

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);

您也可以使用 嵌入您的孩子.但是有一些 CSS 问题您需要注意使用插槽时.

You can also use <slot> to embed your children. But there are some CSS issues you need to be aware of when using slots.

请记住，并非所有浏览器都支持 shadowDOM，并且它不是一个简单的 polyfill.所以如果你只在 Chrome 和 Safari 上工作，那就去吧.如果您打算支持更广泛的浏览器，那么您可能暂时不想使用 ShadowDOM.

Remember that shadowDOM is not supported in all browsers and is not a simple polyfill. So if you are only working on Chrome and Safari, go for it. If you are planning to support a broader range of browsers then you might not want to use ShadowDOM just yet.

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

另请阅读此处:如何在 Web 组件中使用子元素

这篇关于访问自定义元素的子节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！