自定义元素中getElementById返回null，无法切换输入框显示状态

你的代码里document.getElementById('inp')和document.getElementById('slider')返回null，核心原因是Shadow DOM的隔离特性：自定义元素内部通过attachShadow({mode: "open"})创建了Shadow DOM，它会将内部DOM结构与主文档DOM隔离开，外部的document对象无法直接访问Shadow DOM内部的元素。

给自定义元素添加对外暴露的方法，外部通过调用该方法控制内部元素的显示状态，既符合Web Components的封装原则，也避免了直接操作内部DOM的耦合问题。

自定义元素代码修改 #

export class MyComponent extends HTMLElement {
    constructor(){
        super();

        this.attachShadow({mode: "open"});
        const wrapper = document.createElement("div");
        wrapper.setAttribute("class","wrapper");

        // 将元素存为实例属性，方便后续方法中访问
        this.slider = wrapper.appendChild(document.createElement("input"));
        this.slider.setAttribute("class","slider");
        this.slider.setAttribute("type","range");
        this.slider.setAttribute("id","slider");
        let minVal = this.hasAttribute("min-val") ? this.getAttribute("min-val") : "0";
        let maxVal = this.hasAttribute("max-val") ? this.getAttribute("max-val") : "5";
        this.slider.setAttribute("min",minVal);
        this.slider.setAttribute("max",maxVal);
        this.slider.setAttribute("value",minVal);

        this.ampInput = wrapper.appendChild(document.createElement("input"));
        this.ampInput.setAttribute("type","number");
        this.ampInput.setAttribute("id","inp");
        this.ampInput.setAttribute("class","inp"); // 补充类名让样式生效
        this.ampInput.setAttribute("value","5");

        const style = document.createElement("style");
        style.textContent = `.slider{
            background: #cfc; /* 修正拼写错误 backround -> background */
        }

        .inp{
            display: block;
        }

        .wrapper {
            display: inline-grid;
        }`;

        this.shadowRoot.append(style,wrapper);
    }

    // 添加对外方法，接收checkbox状态参数来切换显示
    toggleInputDisplay(isChecked) {
        if(isChecked) {
            this.ampInput.style.display = 'none';
            this.slider.style.display = '';
        } else {
            this.ampInput.style.display = '';
            this.slider.style.display = 'none';
        }
    }
}

外部JS代码修改 #

customElements.define("my-component", MyComponent);

// 获取自定义元素实例
const myComponent = document.querySelector('my-component');
document.getElementById('check').addEventListener("click", hideComponent, false); 

function hideComponent() {
    const isChecked = document.getElementById('check').checked;
    // 调用自定义元素的方法完成切换
    myComponent.toggleInputDisplay(isChecked);
}

如果不想添加组件方法，也可以通过自定义元素的shadowRoot属性访问内部元素（因Shadow DOM模式为open），但这种方式会打破组件封装，仅适合临时调试：

function hideComponent() {
    const isChecked = document.getElementById('check').checked;
    const shadowRoot = document.querySelector('my-component').shadowRoot;
    const inp = shadowRoot.getElementById('inp');
    const slider = shadowRoot.getElementById('slider');
    
    if(isChecked) {
        inp.style.display = 'none';
        slider.style.display = '';
    } else {
        inp.style.display = '';
        slider.style.display = 'none';
    }
}

• 原样式中的backround拼写错误，修正为background
• 给number输入框补充class="inp"，确保样式规则生效

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