JavaScript：引用匿名class静态变量

Question

在 this google tutorial on web components 之后，我喜欢作者在 customElements.define 函数调用中使用匿名 class 的方式，因为它在创建立即调用的函数调用时避免了更多括号.

我正在使用 static class variable 来存储模板元素，因此不会在每次实例化自定义标签时都查询它。

问题在 connectedCallback 我不知道如何引用 class 名称，因为它是一个匿名函数。在 python 中可以 type(self)，但我的研究表明 typeof this 由于原型魔术而在 JS 中不起作用。

window.customElements.define('my-uploader', class extends HTMLElement {
    static template = document.getElementById("TEMPLATE_UPLOADER");

    constructor() {
        super(); // always call super() first
    }

    /** Custom Component Reactions **/
    connectedCallback() {
        let shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(document.importNode(ANONYMOUS_NAME.template, true));  // <--- How to refer to the class name here?
    }

如何引用connectedCallback中的class'ANONYMOUS_NAME?

Answer 1

您可以命名您的 class，这是最干净的方式，或者您可以使用 this.constructor 来获取您的静态变量值：


window.customElements.define('my-uploader', class extends HTMLElement {
    static template = document.getElementById("TEMPLATE_UPLOADER");

    constructor() {
        super(); // always call super() first
    }

    /** Custom Component Reactions **/
    connectedCallback() {
        let shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(document.importNode(this.constructor.template, true)); 
    }

Answer 2

使用影子DOM时，您（通常）在constructor

中创建所有内容

每次 DOM 插入或 DOM 更改都会触发 connectedCallback！考虑 Drag/Drop 交互，或排序 DOM 元素。
如果您再次尝试附加 shadowRoot

，将会出错

你可以链接所有的JS，见下文

importNode 用于多个文档；你会在更好的博客中看到cloneNode。

append 更强大，请参阅文档。
它只是在 IE 中不可用，所以老 JS-Geezers 不知道它。

customElements.define('my-uploader', class extends HTMLElement {
    constructor() {
        let template = document.getElementById("TEMPLATE_UPLOADER").content;
        // don't believe the (MDN) documentation, you CAN execute JS BEFORE super()
        // you just can't access 'this' BEFORE super()
        super() // super sets AND returns the 'this' scope
          .attachShadow({mode: "open"}) // sets AND returns this.shadowRoot;
          .append(template.cloneNode(true)); 
    }
});

<template id="TEMPLATE_UPLOADER">
  <style>
   :host{
    color:red;
   }
  </style>
  <h1>I am <slot></slot></h1>
</template>

<h1>Hello Web Components!</h1>
<my-uploader>Uploader!</my-uploader>

注意！当您的元素在 DOM 中还不存在时，constructor 也会在 document.createElement("my-uploader") 上运行！

JavaScript：引用匿名class静态变量

JavaScript: refer to anonymous class static variable

javascript

web-component