在自定义元素（Web 组件）中使用文档

Question

我有两个单独的自定义元素组件，如果我想对 ComponentA 中的 ComponentB 的元素做些什么，最好的方法是什么？

index.html

<body>

  <componentA>
    <div class="container">
     <p>I am component A</p>
     <p>abc</p>
    </div>
  </componentA>

  <componentB>
    <div class="container">
     <p>I am component B</p>
     <p></p> // Will set data between the p tag in componentA
    </div>
  </componentB>

</body>

componentA.js

...component template...

class ComponentA extends HTMLElement {

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {

    this.setInnerTextToComponentBElement();

  }

  setInnerTextToComponentBElement(){

    // How to set componentB's second p tag innerText?

  }
}

customElements.define('componentA', ComponentA );

我想过使用 document.querySelector 获取 componentB 元素并从那里开始......但这是实现它的最佳实践方法吗？

Answer 1

我建议永远不要在不允许开发人员使用这些组件提供连接它们的方法的情况下将两个组件捆绑在一起。

通常，元素之间的通信或互连由父元素处理。据我所知，唯一可以自行完成此操作的元素是 <label> 元素。如果这是 <input>、<select>、<button> 或 <textarea> 的父元素，那么它将把焦点传递给子元素。

但是要将它与兄弟元素一起使用，您必须将 <label> 的 for 属性设置为另一个字段的 id。然后另一个字段需要设置 id。

我在这里回答了这样的问题：

一旦将两个组件绑定在一起，除非您编写额外的代码以允许分离，否则这些组件将不再单独使用。

相反，要么允许组件分派父级将接收的事件，然后父级将值传递给另一个组件。或者，按照 <label for=""> 如何工作的示例。

在自定义元素（Web 组件）中使用文档

Use document in custom element (web component)

javascript

web-component

custom-element