Question

我正在为教育目的构建vanilla Web组件。这是我的自定义复选框。

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label></label>";
        this._checked = false;

        this.addEventListener("click", this.onClickHandler.bind(this));
    }

    set checked(value) {
        if(value != this._checked) {
            this._checked = value;
            this.update();
        }
    }

    get checked() {
        return this._checked
    }

    onClickHandler(event) {
        this.checked = !this.checked;
    }

    update() {
        let svg = this.shadow.querySelector("svg");

        if(this._checked)
            svg.querySelector("path").setAttribute("d", "M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-8.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z");
        else
            svg.querySelector("path").setAttribute("d", "M5 2c-1.654 0-3 1.346-3 3v14c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3v-14c0-1.654-1.346-3-3-3h-14zm19 3v14c0 2.761-2.238 5-5 5h-14c-2.762 0-5-2.239-5-5v-14c0-2.761 2.238-5 5-5h14c2.762 0 5 2.239 5 5z");    
    }

    connectedCallback() {
        this.update();
        if(this.hasAttribute("checked"))
            this.checked = true;
        else
            this.checked = false;
    }

}

customElements.define("yasar-checkbox", Checkbox);

我想像这样使用它

<yasar-checkbox>MY LABEL</yasar-checkbox>

但是，MY LABEL部分在浏览器中不可见。我想让它可见，并反映通过javascript进行的更改。我怎样才能做到这一点？

Answer 1

使用Shadow DOM时，您需要use a <slot>在将组件放入DOM时引入子内容。这会将所有内容放入您的标签中。 Read more about the <slot> tag了解它如何将子节点导入您的shadow DOM组件。

在下面的示例中，我使用了您的代码并添加了一些CSS和<slot>以使其按您希望的方式工作。

＆＃13;

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<style>div, svg, label { vertical-align: middle;}label {display: inline-block;margin-left: 5px;</style><div><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label><slot></slot></label></div>";
        this._checked = false;

        this.addEventListener("click", this.onClickHandler.bind(this));
    }

    set checked(value) {
        if(value != this._checked) {
            this._checked = value;
            this.update();
        }
    }

    get checked() {
        return this._checked
    }

    onClickHandler(event) {
        this.checked = !this.checked;
    }

    update() {
        let svg = this.shadow.querySelector("svg");

        if(this._checked)
            svg.querySelector("path").setAttribute("d", "M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-8.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z");
        else
            svg.querySelector("path").setAttribute("d", "M5 2c-1.654 0-3 1.346-3 3v14c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3v-14c0-1.654-1.346-3-3-3h-14zm19 3v14c0 2.761-2.238 5-5 5h-14c-2.762 0-5-2.239-5-5v-14c0-2.761 2.238-5 5-5h14c2.762 0 5 2.239 5 5z");    
    }

    connectedCallback() {
        this.update();
        if(this.hasAttribute("checked"))
            this.checked = true;
        else
            this.checked = false;
    }

}

customElements.define("yasar-checkbox", Checkbox);

＆＃13;

<yasar-checkbox>MY LABEL</yasar-checkbox>

＆＃13;

请注意，如果您想支持盲人用户使用的屏幕阅读器，那么您需要添加其他东西以使其正常工作。

例如，您需要support tab-index和多个aria tags。

如何在Web组件中使用子元素

1 个答案: