我無法查詢 shadow dom 的 Select 元素

Question

我有這個父類，我將用它來創建一組其他布局類。 他們基本上創建了基於 flex 的 div。

import { LitElement , css, html} from "lit-element";

const _allowedFlexValue = new Set(['flex-start','flex-end', 'center', 'space-around', 'space-between','stretch','base-line']);

export class BaseLayoutEl extends LitElement{
    #flexDirection

    constructor(flexDirection){
        super();
        this.ma="flex-start";
        this.ca="stretch";
        this.#flexDirection = flexDirection;
    }
    static get properties(){
        return {
            ma: {type: String},
            ca: {type: String}
        }
    }

    check_supplied_values(){
        if(!_allowedFlexValue.has(this.ca) || !_allowedFlexValue.has(this.ma)){
            console.log("main-axis: " , this.ma, ", cross-axis: ",this.ca);
            console.log (`Main-axis/Cross-axis can have only following values: ${[..._allowedFlexValue]}`);
            return false;
        }
        return true;
    }

    static get styles(){
        return css`
.container{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.flex{
    display: flex;
    flex-wrap: nowrap;
}
        `;
    }

    render(){

        if(!this.check_supplied_values()){
            return html`<div>Error</div>`;
        }

        return html`
<style>
.flex{
    flex-direction: ${this.#flexDirection};
    justify-content: ${this.ma};
    align-items: ${this.ca};
}
</style>
<div class="container">
    <div class="flex" id="flex">
        <slot></slot>
    </div>
</div>
`;
    }


}

還有這個一個子類，我試圖在其中訪問父類 shadow dom。

import { BaseLayoutEl } from "./baseLayoutEl.js";


export class CenterThem extends BaseLayoutEl{
    constructor(){
        super("column");
        this.ma="center";
        this.ca="center";
    }

    connectedCallback(){
        super.connectedCallback();
        console.log(this.shadowRoot.querySelector('.flex'));
    }
}

令人驚訝的是 this.shadowRoot.querySelector 總是返回 null，無論我是通過類選擇器“.flex”還是通過 id 選擇器“#flex”進行選擇。

任何人都可以讓我知道如何在孩子中選擇陰影 dom 嗎？

Answer 1

嘗試這個

this.parentNode.querySelector('.flex')

或者

this.parentNode.parentNode.querySelector('.flex')