web-component-slot-example.js

class Paragraph extends HTMLElement {
  constructor() {
    super()
    // Attach shadow DOM
    let shadow = this.attachShadow({mode: 'open'});
	
  	// Append our Paragraph    
    shadow.innerHTML = `
        <slot name="paragraph-text"><p>Default Text</p></slot>
        <p>Another, unchangeable paragraph</p>
    `;
    // Add in our CSS
    let style = document.createElement('style');
    let elCss = style.textContent = `
    	p {
      	color: red;
        font-size: 1.25rem;
      }
    `;
    // Append our CSS
    shadow.appendChild(style);
  }
}
customElements.define('alpha-paragraph', Paragraph);