example.html

<template id="template">
  <style>
    :host {
      display: flex;
      flex-direction: column;
      background-color: red;
      width: 100px;
      height: 100px;
      justify-content: flex-start;
      align-items: center;
    }
  </style>
  <img width="70" height="70" />
</template>
<script>
  'use strict';
  const template = document
    .currentScript
    .ownerDocument
    .getElementById('template');

  /**
   * Creates a x-item-tile element.
   * @class
   */
  class XItemTile extends HTMLElement {
    constructor() {
      super();

      let root = this.attachShadow({ mode: 'open' });
      let clone = document.importNode(template.content, true);
      root.appendChild(clone);

      this.addEventListener('click', (event) => {
        this.dispatchEvent(new CustomEvent('selected', {
          bubbles: true,
        }));
      });
    }


    get name() {
      return this.getAttribute('name');
    }
    set name(value) {
      if (value == null) {
        this.removeAttribute('name');
        this.shadowRoot.children[2].textContent = '';
      } else {
        this.setAttribute('name', value);
        this.shadowRoot.children[2].textContent = name;
      }
    }

    connectedCallback() {
      if (this.shadowRoot == null) return;
      let img = this.shadowRoot.children[1];
      this.shadowRoot.appendChild(new Text(this.getAttribute('name') || ''));
    }
  }

  customElements.define('x-item-tile', XItemTile);
</script>