Javascript 在自定义元素（web组件）中使用文档_Javascript_Web Component_Custom Element

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

javascript

Javascript 在自定义元素（web组件）中使用文档,javascript,web-component,custom-element,Javascript,Web Component,Custom Element,我有两个独立的自定义元素组件，如果我想在ComponentA中使用ComponentB的元素，那么最好的方法是什么 index.html <body> <componentA> <div class="container"> <p>I am component A</p> <p>abc</p> </div> </componentA> &

我有两个独立的自定义元素组件，如果我想在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>

我曾想过使用document.querySelector获取componentB元素，然后从那里开始。。。但是这是最好的实践方式吗？

我建议不要将两个组件捆绑在一起，而不允许使用组件的开发人员提供连接它们的方法

通常，元件之间的通信或互连由父级处理。据我所知，唯一一个单独执行此操作的元素是

元素。如果这是

、

或

的父元素，则它会将焦点传递给子元素

但要将其与同级元素一起使用，必须将

的

属性设置为另一个字段的id
。然后，需要设置另一个字段的id

我的回答是这样的：

一旦将两个组件绑定在一起，这些组件本身就不再可用，除非编写额外的代码以允许分离
相反，允许组件分派父组件将接收的事件，然后父组件将值传递给另一个组件。或者，按照
工作原理的示例。
事件，如您在上一个问题中所要求的。注意：您可以在事件中传递任何内容。详细信息不必是数据。所以A可以在事件中向B传递A方法引用，然后B可以执行ITI，谢谢Danny，所以基本上你的意思是我需要将自定义事件分派给父级（在本例中是普通DOM），在组件B内部，我需要使用document.addEventListener（）捕获事件？另一个小问题是，是否认为与其他Web组件兄弟姐妹交互的不良做法？感谢或使事件侦听器在文档或公共父级上侦听。你有很多选择。没有不好的做法，软件开发就是艺术。您是艺术家。您好，对于使用dispatch events方式，您的意思是像componentA内部一样，我将自定义事件分派到实际的父文档（而不是#文档片段）并侦听componentB内部的自定义事件？是的。尽量保持自定义组件的工作方式与内置组件的工作方式相同。除了
组件之外，所有组件都只通过向上到达其父组件的事件进行通信。
、
和
是次要的例外，因为它们确实使用它们的子对象。与
类似，将从所有子输入元素收集数据，并将该数据传递给服务器
和
使用子元素提供源数据。但没有内置元素直接与兄弟姐妹对话
将焦点放在属性中定义的元素上。公平地说。具有shadowdom的元素通常会使用this.dispatchEvent分派其自定义事件，因此它是从元素容器而不是从shadowdom中的子元素发送的。虽然如果您在影子DOM中嵌入了其他元素，那么这些元素将/应该分派到它们的元素容器中，等等。那么我可以使用“document.querySelector（）”将数据传递给另一个同级web组件的属性吗？这算是直接和兄弟姐妹说话吗？示例：普通文档（而不是#文档片段）内部和componentA内部的两个web组件/自定义元素，我使用document.querySelector（'componentB'）。myData='random data'；将数据传递给组件B。谢谢，你可以这么做，但你应该吗？如果使用查询选择器将两个组件绑定在一起，那么这两个组件始终需要在一起。现在，如果您不希望这些组件单独使用，或者如果它们永远不会离开此页面，请尝试使用它。但是如果你想要可重用性，我建议你不要。相反，为
执行类似于
属性的操作。这样，即使第二个组件不存在，该组件也可以工作。因为它会有一个for
值，所以它不会做任何事情。使用for值，它将被告知将与哪个组件通信。
...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 );