home ~ projects ~ socials

Basic Content Output Web Component Starter

HTML

<wc-example></wc-example>

Output

JavaScript

customElements.define(
  'wc-example',
  class CodeBlock extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    connectedCallback() {
      this.shadowRoot.appendChild(this.template().content.cloneNode(true))
    }

    template() {
      const template = this.ownerDocument.createElement('template')
      template.innerHTML = `
<style>
</style>
<div>Here</div>
`.trim()
      return template
    }
  }
)
-- end of line --