我有两个独立的自定义元素组件，如果我想用ComponentB的元素在ComponentA里面做一些事情，最好的方法是什么？
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的元素，然后从那里开始......但这是最好的做法吗？
我建议永远不要把两个组件绑在一起，而不允许使用组件的开发者提供连接它们的方法。
通常情况下，元素之间的通信或互连是由父元素来处理的。我所知道的唯一一个可以自己处理的元素是 <label> 元素。如果这是一个 <input>, <select>, <button> 或 <textarea> 那么它就会把焦点传递给子元素。
但如果要在兄弟元素上使用它，你必须设置 for 的属性 <label> 拟为 id 的其他领域。然后另一个字段需要有它的 id 套。
我在这里回答了这样的问题。如何在Web组件之间进行通信（原生UI）？
一旦你把两个组件绑在一起，这些组件本身就不再可用，除非你写额外的代码来允许分离。
取而代之的是，要么允许组件派遣事件，由父体接收，然后父体将值传递给另一个组件。或者，仿照下面的例子 <label for=""> 作品。