JSFiddle - React, Tailwind, and code Playground

by khrome

HTML

<raster-layer name="foo"></raster-layer>
                <raster-layer name="bar"></raster-layer>
                <raster-layer name="baz"></raster-layer>

JavaScript

class RasterLayer extends HTMLElement{
    constructor(){
        super();
    } 

    connectedCallback(){
        const name = this.getAttribute('name');
        const visible = this.getAttribute('visible');
        const locked = this.getAttribute('locked');
        const template = document.createElement('template');
        this.style = {};
        template.innerHTML = `
<style>
    .layer{
        display:block;
        height: 50px; 
        width:100%;
    }
    .layer canvas{
        box-shadow: 0px 0px 2px #333333, inset 0px 0px 2px #333333;
        border: 1px solid white;
    }
    canvas{
        vertical-align:middle;
    }
    .layer-icon{
        display: inline-block;
        vertical-align:middle;
    }
</style>
<sl-card class="layer">
    <sl-icon-button class="visible layer-icon" name="${visible === 'true'?'eye':'eye-slash'}" label="Visible"></sl-icon-button>
    <canvas width="40" height="40"></canvas>
    <sl-badge>${name}</sl-badge>
    <sl-icon-button class="locked" name="${visible === 'true'?'lock':'unlock'}" label="Locked"></sl-icon-button>
</sl-card>`;
        this.attachShadow({ mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        const visibleButton = this.shadowRoot.querySelector('.visible');
        visibleButton.addEventListener('click', ()=>{
            const value = this.getAttribute('visible');
            if((value||'').toLowerCase() === 'true'){
                this.setAttribute('visible', 'false');
            }else{
                this.setAttribute('visible', 'true');
            }
        });
        const lockedButton = this.shadowRoot.querySelector('.locked');
        lockedButton.addEventListener('click', ()=>{
            const value = this.getAttribute('locked');
            if((value||'').toLowerCase() === 'true'){
                this.setAttribute('locked', 'false');
            }else{
                this.setAttribute('locked', 'true');
            }
        });
    }
   ...