<my-button> group

Button + SVG icon in a mutually exclusive group

by WebComponents

HTML

<style>
  my-button::part(icon){ fill:red }
  my-button[tooltip] [slot="tooltip"] { background:lightgreen }
</style>
<my-button id="one">
  <div slot="tooltip">Tooltip 1</div>
  <div slot="label">Product Description</div>
</my-button>
<my-button id="two" tooltip>
  <div slot="tooltip">Tooltip 2</div>
  <div slot="label">Product Description</div>
</my-button>
<my-button id="three">
  <div slot="tooltip">Tooltip 3</div>
  <div slot="label">Product Description</div>
</my-button>
<script>
customElements.define('my-button', class extends HTMLElement {
  constructor() {
    super().attachShadow({mode:"open"}).innerHTML =
    `<style>`+
      `button{ width:120px; cursor:pointer } ` +
      `::slotted(div){ pointer-events:none }` + 
      `[name="tooltip"]::slotted(div) { color:blue; font-size: 1.2rem }`+
      `[name="label"]::slotted(div) { font-size:1em;font-weight:bold }`+
      `:host([tooltip]) svg { fill:green!important } `+
      `:host(:hover:not([tooltip])) path{ scale:1.2; transform-origin: center }` +
      `:host(:not([tooltip])) [name="tooltip"]::slotted(div) { visibility:hidden } `+
    `</style>`+
    `<button part="button"><svg part="icon" viewBox="0 0 2400 2400">`+
      `<path fill-rule="evenodd" d="m225 1200c0-539 437-975 975-975s975 437 975 975-437 975-975 975-975-436-975-975zm871-144c115-57 244 46 213 171l-71 284 4-2a75 75 90 0167 134l-4 2c-115 57-244-46-213-171l71-284-4 2a75 75 90 11-67-134l4-2zm104-156a75 75 90 100-150 75 75 90 000 150z"/>`+
      `</svg><slot name="tooltip"></slot><slot name="label"></slot></button>`;
  }
  connectedCallback(){
  	this.onclick = () => this.tooltip = !this.tooltip;
    this.globalListener = document.addEventListener("click",
                         (evt) => this.tooltip = evt.target == this )
  }
  get tooltip()    { return this.hasAttribute("tooltip") }
  set tooltip(val){	this.toggleAttribute("tooltip",val) }
  disconnectedCallback(){
  	document.removeEventListener("click", this.globalListener);
  }
});</script>