Slotted input styling

by Sergey Kulikov

HTML

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

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

<btn-wrapper></btn-wrapper>

JavaScript

class ButtonWrapper extends HTMLElement {

  connectedCallback() {
    let template = document.getElementById('btn-wrapper-template');
    let content = template.content.cloneNode(true);
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(content); 
    
    this.button = this.shadowRoot.querySelector('button');
    
    this.button.addEventListener('contextmenu', e => {
    	console.log(e);
    	e.preventDefault();
    })
    
    document.body.addEventListener('click', e => {
    	console.log('click', e);
    }, true);
  }
}

customElements.define('btn-wrapper', ButtonWrapper);