shadowRoot.activeElement在Safari中不起作用

Question

目前我正在研究具有实现阴影dom功能的stencilJS。我正面临一个与shadowRoot的activeElement相关的问题。它与Chrome工作正常，但是当我测试我的组件时，activeElement在safari中变为null。

这是代码片段

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
  }