Web组件中this.getAttribute不生效且违反规范问题排查

问题根因 #

你在自定义元素的constructor构造函数中直接读取元素属性，不符合Web Components的生命周期执行规则：

• 构造函数执行阶段，自定义元素仅完成实例初始化，还未被挂载到DOM树，标签上定义的属性尚未被解析绑定到元素实例上，此时调用getAttribute必然返回null
• 另外你的JS脚本放在<head>中加载，没有设置延迟执行，脚本加载完成注册自定义元素时，<body>内的标签还未开始解析，进一步加剧了属性读取时机提前的问题

修复方案 #

方案1：将渲染逻辑移入connectedCallback钩子 #

connectedCallback会在自定义元素正式被插入到DOM树时触发，此时所有标签属性已完成解析，可以正常读取：

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const p = document.createElement('p');
    p.innerHTML = `Hello ${this.getAttribute('name')}!`;
    this.shadowRoot.append(p);
  }
}
customElements.define('hello-world', HelloWorld);

方案2：支持属性动态更新（可选） #

如果需要后续修改name属性时自动更新展示内容，可以增加属性监听配置：

class HelloWorld extends HTMLElement {
  // 声明要监听的属性
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.p = document.createElement('p');
    this.shadowRoot.append(this.p);
  }

  // 属性新增/修改时触发
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.p.innerHTML = `Hello ${newValue}!`;
    }
  }
}
customElements.define('hello-world', HelloWorld);

额外兼容方案 #

如果你不想修改JS代码，也可以给<head>中的脚本标签增加defer属性，让脚本等待整个DOM解析完成后再执行，也能解决部分场景的问题，但依然推荐使用生命周期钩子的方案，兼容性和规范性更好：

<script src="./script.js" defer></script>

内容的提问来源于stack exchange，提问作者TacoSnack