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

202403-WebComponent

milkmidi
March 13, 2024
160

 202403-WebComponent

milkmidi

March 13, 2024
Tweet

Transcript

  1. 工 商服務 Senior Frontend Engineer Senior Backend Engineer Full stack

    Engineer C++ / Android / iOS / Machine Learning / MIS Marketing Project Specialist Firmware Manager
  2. Web Development Trends in 2024 React / Vue / Angular

    Flash Action graphQL TailwindCSS webassembly Webpack / Vite No jQuery test e2e test 00940
  3. 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
  4. 外層和 Shadow DOM 的 style 不會互相影響 但,也是缺點 透過 attachShadow( {

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

  6. QA