Question

目前，我正在研究stencilJS，它具有实现影子dom的功能。我遇到了与shadowRoot的activeElement相关的问题。它在Chrome上正常运行，但是当我测试组件时，activeElement在野生动物园中为空。

这是代码段

import { Component, Prop, Listen } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  @Listen('click')
  onHadnleClickEvent(ev) {
    console.log('===== 31 =====', ev.target.shadowRoot.activeElement)// getting null in safari
  }

  render() {
    return ( <div>
        <button>Click Me!!!</button>
      </div>
    )
  }
}

Answer 1

我发现启用shadowDom时获得单击元素的结果。解决方法如下：

  @Listen('click')
  onHadnleClickEvent(ev) {
    console.log('===== 31 =====', ev.composedPath()[0]// It will give you the clicked element
  }

shadowRoot.activeElement在Safari中不起作用

1 个答案: