whats-up {
  --button-bg: #f06d06;
button {
  /* border doesn't cascade so this won't effect the button in the Shadow DOM */
  border: 4px solid black;
const template = document.createElement('template');
template.innerHTML = `
button {
  /* Settable from outside, but has fallback */
  background: var(--button-bg, #1E88E5);
  color: white;
  padding: 2rem 4rem;
  border: 0;
  font-size: 1.5rem;

class WhatsUp extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    const button = this.shadowRoot.querySelector("button");
    button.addEventListener("click", this.handleClick);
  handleClick(e) {

window.customElements.define('whats-up', WhatsUp);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.