slot元素内部的强制焦点事件

Question

我尝试将一个元素集中在一个slot元素中，该元素在一个自定义元素中被使用。

在我的自定义元素中，我查询slot元素，然后我使用方法.assignedElements，它只是一个div，然后我在该元素中查询，以找到我想要的输入。之后，我使用.focus()方法来很好地聚焦输入。但这并不管用。

如果有人能帮上忙，请告诉我

我目前正在使用模板组件完成所有这些工作。

模具web组件。

<tab-component> This is a web-component with a render method that returns <slot>
now I use tab-component inside of another web-component inside of it's render method, using a native yes, input. 

老实说，我不能再多说了，如果任何人有任何尝试访问web组件插槽中的输入的经验，请让我们知道。

Answer 1

以下是一些事情：

event.

• assignedElements

1. 确保您正在使用的slotchange返回一个元素数组，而不是单个元素。因此，您必须将其视为数组。

下面的示例获取assignedElements，然后过滤掉我要查找的元素，然后对该元素调用focus()。

​

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML="<slot></slot>";
    let slot = this.shadowRoot.querySelector('slot');
    slot.addEventListener('slotchange', 
      e => {
        let el = slot.assignedElements().filter(
          node => node.classList.contains('focus')
        );
        if (el) {
          el[0].focus();
        }
      }
    );
  }

  connectedCallback() {
  
  }
}

customElements.define('my-el', MyEl);

<my-el>
  <input type="text" placeholder="I am not focused"/>
  <input type="text" placeholder="I am focused" class="focus"/>
</my-el>

​