JSFiddle - React, Tailwind, and code Playground

by gol ngaz²

HTML

<input is="my-input" />
<my-button class="test" coucou="heloo world" titre="Hello bouton">
  <p class="ext">bonjour</p>
</my-button>
<p class="ext">bonjour</p>

CSS

.test p.ext {
  color: blue;
}

JavaScript

const template = document.createElement('template');

template.innerHTML = `
<style>
p {
color: red;
}
</style>

  <p class="ext">bonjour</p>
  <button id="test">Juste mon bouton</button>
  <slot></slot>

`

class MyButton extends HTMLElement {
    constructor() {
        super();
        
        console.log('ici', this.getAttribute('coucou'))

        this.attachShadow({mode: 'open'});
				this.shadowRoot.appendChild(template.content.cloneNode(true));

    }
}

window.customElements.define('my-button', MyButton);