Slotted input styling

by Sergey Kulikov

HTML

<input-wrapper>
  <input placeholder="Placeholder">
</input-wrapper>

<template id="input-wrapper-template">
  <style>
    ::slotted(input)::placeholder {
      color: red;
    }

    ::slotted(input) {
      border: solid 1px green;
    }
  </style>
  <slot></slot>
</template>

JavaScript

class InputWrapper extends HTMLElement {

  connectedCallback() {
    let template = document.getElementById('input-wrapper-template');
    let content = template.content.cloneNode(true);
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(content); 
  }
}

customElements.define('input-wrapper', InputWrapper);