带有阴影的自定义 HTML 表单元素 DOM 给出空白 html 页面

Question

代码来自本页https://usefulangle.com/post/362/custom-elements 它构建了一个带有阴影 DOM.

的自定义 html 表单元素

但是，当我在浏览器中打开它时，它是空白的。

我在“检查”中打开代码，看到了这个错误。

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);

<template id="input-plus-minus-template">
        <style>
        button {
            width: 25%;
            /* other CSS */
        }
    
        input {
            width: 50%;
            /* other CSS */
        }
        </style>
        <div id="container">
            <button id="subtract">-</button>
            <input type="text" id="count" value="1" readonly />
            <button id="add">+</button>
        </div>
    </template>


<!-- custom element being used -->
<input-plus-minus id="sample"></input-plus-minus>

Answer 1

根据评论，我修改了代码，现在可以使用了。非常感谢！！

class InputPlusMinus extends HTMLElement {

  connectedCallback() {
    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);

<template id="input-plus-minus-template">
            <style>
            button {
                width: 25%;
                /* other CSS */
            }
        
            input {
                width: 50%;
                /* other CSS */
            }
            </style>
            <div id="container">
                <button id="subtract">-</button>
                <input type="text" id="count" value="1" readonly />
                <button id="add">+</button>
            </div>
        </template>


<!-- custom element being used -->
<input-plus-minus id="sample"></input-plus-minus>

带有阴影的自定义 HTML 表单元素 DOM 给出空白 html 页面

Custom HTML Form Element with Shadow DOM gives blank html page

html

javascript

shadow-dom