I am building vanilla web ponents for educational purposes. Here is my custom checkbox.

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<svg xmlns='' 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);

I want to use it like this

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

However, MY LABEL part is not visible on the browser. I want to make it visible and also reflect changes that are made through javascript. How can I achieve this?

I am building vanilla web ponents for educational purposes. Here is my custom checkbox.

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<svg xmlns='http://www.w3/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);

I want to use it like this

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

However, MY LABEL part is not visible on the browser. I want to make it visible and also reflect changes that are made through javascript. How can I achieve this?

• javascript
• web-ponent
• native-web-ponent

• you don't need to use bind in this line: this.onClickHandler.bind(this). Class methods are auto bound. – Intervalia Commented Feb 28, 2018 at 16:08

1 Answer 1

When using Shadow DOM you need to use a <slot> to pull in the child content when you place your ponent into the DOM. That will place all of that content into your label. Read more about the <slot> tag to understand how it imports child nodes into your shadow DOM ponents.

In the example below I took your code and added some CSS and the <slot> to get it to work the way you want.

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/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);

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

Be aware that if you want to support the screen readers used by blind users then there are other things you will need to add to your ponent to get it to work properly.

For example, you will need to support tab-index and several aria tags.