强制将焦点事件放入槽元素中

Question

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

在我的自定义元素内部，我查询了slot元素，而不是使用方法.assignedElements，它只是一个div，然后我查询该元素内部以找到我想要的输入。之后，我使用方法.focus（）很好，集中输入..但这不起作用。

如果有人可以提供帮助，请告诉我

我目前正在使用Stencil组件做所有这些。

模板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

一些东西：

1. 确保您使用的是slotchange事件。
2. assignedElements返回一个元素数组，而不是单个元素。所以你必须像对待数组一样对待它。

下面的示例获取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>