在其构造函数中获取自定义元素的 id

Question

我正在尝试为网站制作一些可重复使用的标题（多个页面，不必费心复制/粘贴所有内容）；在它里面我只有一个logo-element 元素（也是自定义的），我想让它的 id 等于标题加上一个__logo 后缀。

这里是javascript：

class TopBar extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({ mode: "open" });

        let logoElement = document.createElement("logo-element");
        logoElement.setAttribute("id", `${ this.getAttribute("id") }__logo`);

        this.shadowRoot.append(logoElement); 
    }
}

customElements.define('top-bar-element', TopBar);

这是 HTML：

<top-bar-element id="top-bar"></top-bar-element>

然而，当我检查时，我发现<logo-element id="null__logo"></logo-element>。

我猜是因为浏览器只在元素创建后才设置属性。

还有其他解释吗？有解决办法吗？

Answer 1

你是对的，在constructor阶段元素只在内存中，不能访问DOM

所以你必须在connectedCallback：

customElements.define('my-element', class extends HTMLElement {
  constructor() {
    let content = ["slot","logo-element"].map(x=>document.createElement(x));
    super() // docs are wrong, super doesn't have to be first
      .attachShadow({mode: "open" })
      .append( ...content );
  }
  connectedCallback() {
    this  
      .shadowRoot
      .querySelector("logo-element")
      .id = this.id + "__logo";

    console.log(this.shadowRoot.innerHTML);
  }
});

<my-element id="ONE">Hello World!</my-element>

无构造函数

但是你不需要在你自己的元素中的构造函数（将执行来自HTMLElement的默认构造函数）

customElements.define('my-element', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: "open"}).innerHTML = `<slot></slot>`;
    let el = this.shadowRoot.appendChild(document.createElement("logo-element"));
    el.id = this.id + "__logo";
    console.log(this.shadowRoot.innerHTML);
  }
});

<my-element id="TWO">Hello World!</my-element>

注意事项：

• 展示了设置元素 HTML 内容的不同用途，您可以混合使用适合您的方式
• id 是一个默认属性（如标题和名称）并且（默认情况下）有一个 Getter/Setter
• 您的 logo-element 有效，但仍然是未知元素
• 文档应该说：你不能使用'this'范围引用之前super()被调用
• shadowDOM 不是必需的；您可以在没有
的情况下创建自定义元素

没有 shadowDOM

customElements.define('my-element', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<logo-element id="${this.id}__logo">${this.innerHTML}</logo-element>`;
    console.log(this.innerHTML);
  }
});

<my-element id="THREE">Hello World!</my-element>