Page Title Web Component

Show page title in Shadow DOM

by Erik Gillespie

HTML

<page-title></page-title>

<h2>
  <page-title></page-title>
</h2>

<page-title style="color: red"></page-title>

CSS

body {
  background-color: #222;
  color: white;
}

p {
  text-decoration: underline;
}

JavaScript

class PageTitle extends HTMLElement {
  constructor () {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `<p>${document.title}</p>`
  }
}

customElements.define('page-title', PageTitle)