JSFiddle - React, Tailwind, and code Playground

by dandclark_msft

HTML

<script>
  class CustomSelect extends HTMLElement {
    constructor() {
      super();
      this.shadowRoot_ = this.attachShadow({ mode: "open"});

      let styles = new CSSStyleSheet();
      styles.replaceSync(`
        * {
          border: 2px solid blue;
          padding: 0.5em;
          margin: 0.5em;
        }

        .default-select-button-styles {
          background-color: gray;
        }

        .default-listbox-styles {
          background-color: lightgray;
        }

      `);
      this.shadowRoot_.adoptedStyleSheets = [styles];

      this.shadowRoot_.innerHTML = `
        <slot name="select-entire">
          <slot name="select-button">
            <div class="default-select-button-styles"> <!-- Event handlers for default button behavior go on this div -->
              <slot name="select-button-contents">
                <div>Default select button</div>
              </slot>
            </div>
          </slot>
          <slot name="select-listbox">
            <div class="default-listbox-styles"> <!-- Event handlers for default listbox behavior go on this div -->
              <slot name="select-listbox-contents">
                <slot><!-- All the options will end up in this unnamed slot if none of the parent slots are replaced by site author content --></slot>
              </slot>
            </div>
          </slot>
      </slot>
      `;
    }
  };
  window.customElements.define("custom-select", CustomSelect);
</script>
<body onload="setup()">
  <script>
    function setup() {
      document.querySelectorAll("pre.showCode").forEach((preElement) => {
        preElement.innerText = `  <select>${preElement.nextElementSibling.innerHTML}</select>`;
      });
      document.querySelector("#showShadowDOM").innerText = 
        `        <#shadow-root>${document.querySelector("custom-select").shadowRoot_.innerHTML}</shadow-root>`;
    }
  </script>
  <style>
    body {
      width: 50em;
    }

    div,option {
      border: 2px solid...