从元素外部调用 LitElement 方法

Question

我有一个简单的 LitElement 组件，如下所示：

class MyElement extends LitElement {

  constructor() {
    super();
  }

  customMethod(data) {
    // do something with the passed parameter
  }

  render() { 
    return html`<div id="element"></div>`;
  }
}

customElements.define('my-element', MyElement);

我希望能够从我的元素外部调用该 customMethod。

例如，如果我将元素添加到网页，如下所示：

<my-element></my-element>

然后我希望能够向页面添加一些 JavaScript 并调用该 customMethod。

我试过：

var element = document.getElementById('element');

element.shadowRoot.customMethod('example data');

但它声称它不可用...我如何调用 LitElement 实例上的方法？

Answer 1

您不需要在通话中使用shadowRoot：

var element = document.getElementById('element');

element.customMethod('example data');

但你需要能够找到你的元素

<my-element id='element'></my-element>