smpnjn

npx react-create-app my-app

smpnjn

<status-bar></status-bar>

smpnjn

<div class="status-bar">
    <div class="size">
        <div class="small">-</div>
        <div class="big">+</div>
    </div>
    <div class="status-bar-progress">
        <div class="progress">
            <div class="progress-percentage"></div>
        </div>
    </div>

smpnjn

<alpha-paragraph color="blue">
  <p slot="paragraph-text">
    Custom Text
  </p>
</alpha-paragraph>

smpnjn

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>

smpnjn

<alpha-paragraph color="blue">
  <p slot="paragraph-text">
    Custom Text
  </p>
</alpha-paragraph>

smpnjn

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>

smpnjn

<template id="alphaParagraph">
    <slot name="paragraph-text"><p>Default Text</p></slot>
    <p>Another, unchangeable paragraph</p>
</template>

smpnjn

class Paragraph extends HTMLElement {
  constructor() {
    super()
    // Attach shadow DOM
    let shadow = this.attachShadow({mode: 'open'});
	
  	// Append our Paragraph
    shadow.innerHTML = '<p>Hello</p>'
    
    // Add in our CSS

smpnjn

class Paragraph extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = '<p>Hello</p>'
  }
  connectedCallback() {
      // ...
  }
  attributeChangedCallback() {
      // ...