Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebComponent

 WebComponent

2023 Webconf - WebComponent

milkmidi

August 12, 2023
Tweet

More Decks by milkmidi

Other Decks in Programming

Transcript

  1. Web Development Trends in 2023 React / Vue / Angular

    Flash Action graphQL TailwindCSS webassembly Webpack / Vite No jQuery Test
  2. connectedCallback() Invoked when the custom element is first connected to

    the document's DOM. disconnectedCallback() Invoked when the custom element is disconnected from the document's DOM. attributeChangedCallback() 
 Invoked when one of the custom element's attributes is added, removed, or changed. Life cycle callbacks
  3. 外層和 Shadow DOM 的 style 不會互相影響 但,也是缺點 透過 attachShadow( {

    mode } ); 可以讓外層的 JS 是否可以呼叫 shadowDOM 裡的元素 mode: open:element.shadowRoot // ShadowRoot obj mode: closed: element.shadowRoot // null
  4. QA