时间戳

首页 > 解决方案 > 如何引用 Web 组件本身？

polymer - 如何引用 Web 组件本身？

问题描述

在 Web 组件内部，我可以使用 CSS 选择器:host来选择 Web 组件本身。

在 js 中，我可以参考this.shadowRoot，但不完全是 web 组件。有没有办法在js中引用web组件？

标签： polymerlit-element

解决方案

在 JavaScript 中，调用者上下文（发生在哪里）以及调用函数的方式（通过 test() 或 new 关键字进行简单调用）定义了函数this，例如：

function test(){
  console.log(this);
}

test();//shows window
new test()// creates an brand new object and assign it to test's this

Web 组件（特别是这里的自定义元素部分）定义是由customElements.define完成的，它将创建的元素分配为this，因此您可以在默认情况下在它的每个方法中引用它：

window.customElements.define('test-element', class extends HTMLElement {
  constructor() {
   super();

   this.addEventListener("click", () => {
   // this means 'test-element' DOM
   });
  }
});

推荐阅读