Paggamit lang ng Ilang Bahagi

Hindi mo kailangang palawigin ang buong base class para gamitin ang ilang feature. Lahat ng internals ay exposed at magagamit nang hiwa-hiwalay kaya praktikal mong maibubuo ang behavior sa sarili mong mga class.

Narito ang halimbawa ng paggamit ng html tag template sa isang class na nagpapalawig mula sa vanilla na HTMLElement… Tingnan din sa CodePen ↗, o tingnan ito nang live: Just the parts demo ↗.

import { html } from 'https://esm.sh/web-component-base@latest/html'
import { createElement } from 'https://esm.sh/web-component-base@latest/utils'

class MyQuote extends HTMLElement {
  connectedCallback() {
    const el = createElement(
      html` <button onClick=${() => alert('hey')}>hey</button>`
    )
    this.appendChild(el)
  }
}

customElements.define('my-quote', MyQuote)