JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<user-menu>
  <div class="placeholder"></div>
</user-menu>

CSS

.placeholder {
  width: 120px;
  height: 40px;
  border-radius: 1rem;
  background-color: rgba(127, 127, 127, 0.5);
}

JavaScript

const parseTemplate = (...args) => {
	console.log('parsingTemplate', args)
	return ``;
};


class UserMenu extends HTMLElement {
  constructor() {
    super();

    console.log('whu', this);
    const shadowRoot = this.attachShadow({mode: "open"});
    const container = document.createElement('div');
    const word = 'actual';
    const template = parseTemplate`Whut the ${word} @#%`;
        container.innerHTML = `<h1>Not this</h1>`;
        console.log('container', container);
    shadowRoot.appendChild(container);
    this.addListeners();
  }
  
  get checked() {
    return this._internals.states.has("--opened");
  }

  set checked(flag) {
    if (flag) {
      this._internals.states.add("--opened");
    } else {
      this._internals.states.delete("--opened");
    }
  }
  
  connectedCallback() {
    console.log("Custom element added to page.");
    // Attach an ElementInternals to get states property
    this._internals = this.attachInternals();
  }

  disconnectedCallback() {
    console.log("Custom element removed from page.");
  }
  
  adaptedCallback() {
  	console.log("adapted");
  }
  
  addListeners () {
  	/*
  	this.addEventListener('click', () => {
  	      console.log('clicky');
  	    });
  	  }
      */
  	this.addEventListener("click", this.handleClick.bind(this));
  }

  handleClick(event) {
    // Toggle the 'checked' property when the element is clicked
    this.checked = !this.checked;
  }
  
  
  
}

customElements.define('user-menu', UserMenu);

// const register = (tagName, constructor, options) => {
//	if (!customElements.get(tagName)) {
//    customElements.define(name, constructor);
//  };
// }