HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<body>
<script>
  class CustomButton extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = `
        <style>
          :host {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
          }

:host(:hover) {
            background-color: #0056b3;
          }

button {
            font-weight: bold;
            border: none;
            background: none;
            color: inherit;
            cursor: inherit;
            padding: 0;
          }

/* Styling slotted content */
          ::slotted(span) {
            font-style: italic;
            text-decoration: underline;
          }
        </style>

<button>
          <slot></slot>
        </button>
      `;
    }
  }

customElements.define('custom-button', CustomButton);
</script>

<custom-button id="my-button">Click <span>here</span></custom-button>
</body>