Я не могу сделать запросВыбрать элементы теневого дома - PullRequest
Новая
       86

Я не могу сделать запросВыбрать элементы теневого дома

1 голос
/ 27 марта 2020

У меня есть этот родительский класс, который я буду использовать для создания набора других классов макета. Они в основном создают основанный на 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.shadow Root .querySelector всегда повторяет null, независимо от того, выбираю ли я по сектору классов '.flex' или по селектору идентификаторов '#flex'.

Может ли кто-нибудь дать мне знать, как выбрать теневого домика у ребенка?

1 Ответ

0 голосов
/ 27 марта 2020

попробуйте 

this.parentNode.querySelector('.flex')

или 

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