我正在尝试在不使用 ShadowDOM 的情况下构建一个 WebComponent - 到目前为止它基本上只是工作，但现在我想构建一个包装其他组件的组件，就像使用 Angular 的 @ViewChild / @ViewChildren 一样。 （我在这里用来渲染的库是uhtml，类似于lit-html）

export class Dropdown extends HTMLElement {

    private open: boolean = false;

    static observedAttributes = ["open"]

    constructor() {
        super();
    }

    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
        switch (name) {
            case "open":
                this.open = Boolean(newValue);
                break;
        }
        this.display()
    }

    connectedCallback() {
        this.display()
    }

    display = () => {
        render(this, html`
            

                

                
            
        `)
    }

    static register = () => customElements.define("my-dropdown", Dropdown)

}

如果我现在使用这个组件

Dropdown.register();


render(document.body, html`
    
        test
    

`)

我期待看到

    

        test
    

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

display = () => {
    render(this.shadowRoot as Node, html`

    
some content here

    

        random header
    
    

        
        
some content here