<!--
All the presentational styles
are inside the components shadow-roots
-->
<todo-list>
  <todo-li>I have to do something...</todo-li>
  <todo-li>But i don't remember what.</todo-li>
  <todo-li>I don't care</todo-li>
</todo-list> 
todo-li + todo-li {
  color: red;
}
/*
 * This web component is just a basic example.
 * It doesn't add accessibility things and the js code
 * is not optimized. 
 */

class TodoList extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
  }


  connectedCallback() {
    this.setAttribute('role','listbox')
    
    const template = `
      <style>
        :host {
          contain: content;
          display: block;
          overflow-x: hidden;
          overflow-y: auto;
          border-radius: 10px;
          background-color: white;
          font-family: Arial;
          max-width: 300px;
          margin: 0 auto;
          box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.2);
        }

      </style>
      <slot>
        <p>
          Yeah! Nothing to do.
        </p>
      </slot>
    `;

    this.shadow.innerHTML = template;
  }
}

window.customElements.define("todo-list", TodoList);


/*
 * This web component is just a basic example.
 * It doesn't add accessibility things and the js code
 * is not optimized. 
 */


class TodoLi extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
  }


  connectedCallback() {
    this.setAttribute('role','option')
    const template = `
      <style>
        :host {
          display: flex;
          padding: 8px 16px 8px 8px;
        }

        label {
          display: contents;
        }

        input {
          margin-right: 8px;
        }

        input:checked + label {
          opacity: 0.3;
        }
      </style>
      <input id="input" type="checkbox" />
      <label for="input">
        <slot></slot>
      </label>
    `;

    // this.shadow.innerHTML = template; // ShadowDOM
    this.shadow.innerHTML = template;
  }
}

window.customElements.define("todo-li", TodoLi);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.