Working demo of CssChain

git GitHub | test coverage | Working with slots | PokéAPI Explorer | light DOM templates & slots

In order to use SccChain within web component, declare the $ method in class:

  $( ...arr ){ return $( this.shadowRoot ).$(...arr); } 

Then this.$(css) is available for accessing the DOM like in sample.

Demo of css-chain use in web component


    <script type="module" src="css-chain-element.js"></script>

    <css-chain> 🍦 </css-chain>
    <css-chain> 🌼 </css-chain>
🍦 🌼

css-chain element sources

import $ from './CssChain.js';

    export class
CssChainElement extends HTMLElement
{
    constructor()
    {
        super();
        this.title = 'Hey there';
        this.counter = 0;

        const t = document.createElement('div');
        t.innerHTML = this.template;

        this.attachShadow({mode: 'open'}).appendChild(t);
        this.$('button').addEventListener('click', ()=>this.__increment() );
    }

    get template()
    {   return `
<slot></slot> &bull;
<b></b><br/>
<input /><button>🛒</button>
`
    }

    $( ...arr ){ return $( this.shadowRoot ).$(...arr); }

    __increment()
    {   const slotContent = this.$().slots().txt();
        this.$('b').innerHTML += `<span>${ slotContent }</span>`;
        this.counter = this.$('input').value = this.$('span').length;
    }
}