shadowRoot.activeElement не работает в сафари

Question

В настоящее время я работаю над stencilJS, который имеет функцию для реализации shadow dom.Я сталкиваюсь с проблемой, связанной с activeElement shadowRoot. Он отлично работает с 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
  }