leah

my dev_log

0%

16. Web Components, PWA

Posted on Edited on In ,

Web Components

Features

  1. Scoped
  2. Reusable
  3. Encapsulated

Made by 4 main technologies

  1. HTML Template
  2. Custom Elements
  3. Shadow DOM
  4. HTML Imports

Basic Web Components

  • Card Title
  • Component Title
1
2
3
4
5
<section class="card">
<div>
<h2>
<p>
</...>

👇

  1. reduce duplicated contents using…
    <product-card
    data-header=
    data-img=
    data-text=

  2. with JavaScript!

  • customElements : global variable
  • shadow, secret // outside world can’t get access to it
  • shadow DOM
    a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents).
    ※ font-size => DON’T use px !!! USE rem

Progressive Web App (PWA)

  1. Reliable: download and work off-line
  • Service worker (downloads content-heavy web, use off-line)
  • Pre-caching
  1. Fast
  2. Engaging
  • No app store needed
  • Immersive full screen
  • Push Notifications
  • Chrome DevTools : Inspect -> LightHouse ěť´ěš©!!