web-components-attributes.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>
    `;
    // Our custom color
    let color = 'red';
    if(this.getAttribute('color') !== null) {
      color = this.getAttribute('color');
    }
    // Add in our CSS
    let style = document.createElement('style');
    let elCss = style.textContent = `
    	p {
      	color: ${color};
        font-size: 1.25rem;
      }
    `;
    // Append our CSS
    shadow.appendChild(style);
  }
}
customElements.define('alpha-paragraph', Paragraph);