Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Web components these days

Web components these days

kkeeth

May 29, 2022
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. WEB COMPONENTS THESE DAYS 29 May, 2022 Ionic Meetup #19

    Tokyo @kkeeth @kuwahara_jsri @kkeeth
  2. Who am I const my_info = { Name: ‘Kuwahara KEETH

    Kiyohito’, Company: ‘Yumemi Inc’, Position: ‘Servant Leader/Board’, Skills: ‘Riot.js/Next.js/Chit-chat’, }
  3. While past releases of Ionic were tightly coupled to Angular,

    version 4.x of the framework was re-engineered to work as a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue…and so on Ionic Official WHEN IT COMES TO IONIC URL: https://ionicframework.com/docs#framework-compatibility
  4. A set of technologies for creating reusable custom elements and

    using them in web applications. This is accomplished using encapsulated functionality that is independent of the rest of the code. “Web Components” by MDN WHAT IS WEB COMPONENTS? URL: https://developer.mozilla.org/ja/docs/Web/Web_Components
  5. IT IS BASED ON THREE MAIN SPECIFICATIONS creates custom HTML

    tags, improves existing HTML tags, de fi nes behavior of tags and so on use <template> to create markup template with dynamic content, but not rendered immediately separates CSS and JS and provides encapsulated function Shadow DOM Custom Elements HTML Templates
  6. INTRODUCTION OF WEB COMPONENTS BY VARIOUS BROWSER VENDORS ▸ Chrome

    and Safari implementations from 2016 ▸ Chrome launched V0 of “Shadow DOM” and “Custom Elements” in 2014 ▸ Now removed, V1 launched in 2016 ▸ Introduced in Firefox in 2018 ▸ Edge in 2020 (when Microsoft switches to Chromium engine) →ɹFinally, stable APIs and browser support 💁
  7. SOME LIBRARIES FOR WEB COMPONENTS ▸ WebComponents.org ▸ The Component

    Gallery ▸ generic-components ▸ web-components-examples ▸ awesome-standalones ▸ accessible_components ▸ Kickstand UI
  8. WEB COMPONENTS BASICS ▸ The sample “<hello-world>” tag is here.

    ▸ We need to use ‘-’ in the element name to avoid interfering with html standard elements.
  9. ▸ To control the custom elements, we need to use

    the ‘class’ of ES2015. ▸ We need to use the method “connectedCallback()”, which is called when an element is added to the document WEB COMPONENTS BASICS
  10. ▸ Now that we are ready to connect, let's tie

    this to the “<hello-world>” element ▸ Using the “CustomElementRegistry” interface ▸ The actual methods of the “window.customElements” property are used, and the “de fi ne()” method is used to connect them WEB COMPONENTS BASICS
  11. ▸ Incidentally, it can be styled with CSS like other

    HTML elements WEB COMPONENTS BASICS
  12. ▸ First, add a constructor ▸ Next, add a method

    to detect attributes WEB COMPONENTS BASICS
  13. ▸ Finally, make minor modi fi cations to the description

    that sets the value WEB COMPONENTS BASICS
  14. ▸ By the way, try to see if the property

    really changes when you change it. ▸ Run the following in the console WEB COMPONENTS BASICS
  15. ▸ We need to add a line to make them

    work ▸ “connectedCallback” runs on de fi ne 💁 WEB COMPONENTS BASICS
  16. THE ISSUE OF CUSTOM ELEMENTS ▸ Custom elements like as

    before, but may be subject to external interference (by CSS, JS) ▸ Shadow DOM solves the encapsulation problem ▸ The “Element.attachShadow()” method for such cases (ƅТƅ)ů ▸ Adds a Shadow DOM tree to a speci fi c element and returns a reference to its ShadowRoot
  17. ▸ There are 2 modes ▸ open: Access from external

    JavaScript using ShadowRoot ▸ closed: deny access from external JavaScript (returns `null`) ▸ Pre-existing elements containing Shadow DOM, such as `<video>`, are `closed` SHADOW DOM
  18. ▸ Templates are de fi ned with a “<template>” tag

    ▸ It is practical to give them an ID so that they can be referenced within component classes HTML TEMPLATES
  19. 🙇 Sorry … 🙇 I will add the HTML template

    “slot” later when I upload the slides!!