<button-duplicator>
  <p>Some Light DOM text</p>
  <button>Light DOM Button</button>
</button-duplicator>
button-duplicator {
  font-family: fantasy;
  color: red;
  font-size: 20px;
}

button {
  font-family: fantasy;
}
View Compiled 
const template = document.createElement("template");
template.innerHTML = `
<slot></slot>
<p>Some Shadow DOM text</p>
<button>Shadow DOM Button</button>
`;

class ButtonDuplicator extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: "open" });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("button-duplicator", ButtonDuplicator);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.