基于Shadow DOM的自定义HTML表单元素运行时页面空白问题求助

• 核心问题是脚本执行顺序错误：你的JS代码在DOM中的<template>元素完成加载前就已经执行，document.querySelector('#input-plus-minus-template')会返回null，后续访问.content属性时触发JS报错，导致自定义元素注册失败，页面没有对应渲染内容，因此显示空白。

你可以选择以下任意一种方案解决：

方案1：调整脚本加载位置 #

将你的所有JS代码放到HTML页面的底部，放在<template>和<input-plus-minus>自定义元素的后面，保证JS执行时模板已经加载到DOM树中。

方案2：包裹DOM加载完成事件 #

把所有JS逻辑包裹在DOMContentLoaded事件回调中，等待整个DOM树加载完成后再注册自定义元素：

document.addEventListener('DOMContentLoaded', function() {
  class InputPlusMinus extends HTMLElement {
    constructor() {
      super();

      let template = document.querySelector('#input-plus-minus-template').content;
      this.attachShadow({
        mode: 'open'
      }).appendChild(template.cloneNode(true));

      let add_button = this.shadowRoot.querySelector("#add");
      let subtract_button = this.shadowRoot.querySelector("#subtract");
      let count_textbox = this.shadowRoot.querySelector("#count");

      this.setAttribute('value', '1');

      add_button.addEventListener('click', () => {
        let current = parseInt(count_textbox.value, 10);
        count_textbox.value = current + 1;
        this.setAttribute('value', count_textbox.value);
      });

      subtract_button.addEventListener('click', () => {
        let current = parseInt(count_textbox.value, 10);
        if (current > 1) {
          count_textbox.value = current - 1;
          this.setAttribute('value', count_textbox.value);
        }
      });
    }
  }

  customElements.define('input-plus-minus', InputPlusMinus);
})

方案3：在JS中直接构建模板 #

不依赖HTML里的<template>元素，直接在JS内部创建模板，彻底避免加载顺序问题：

class InputPlusMinus extends HTMLElement {
  constructor() {
    super();
    // 直接创建模板
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        button {
            width: 25%;
        }
        input {
            width: 50%;
        }
      </style>
      <div id="container">
          <button id="subtract">-</button>
          <input type="text" id="count" value="1" readonly />
          <button id="add">+</button>
      </div>
    `;
    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));

    // 剩下的原有逻辑不变
    let add_button = this.shadowRoot.querySelector("#add");
    let subtract_button = this.shadowRoot.querySelector("#subtract");
    let count_textbox = this.shadowRoot.querySelector("#count");

    this.setAttribute('value', '1');

    add_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      count_textbox.value = current + 1;
      this.setAttribute('value', count_textbox.value);
    });

    subtract_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      if (current > 1) {
        count_textbox.value = current - 1;
        this.setAttribute('value', count_textbox.value);
      }
    });
  }
}

customElements.define('input-plus-minus', InputPlusMinus);

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