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

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. Who am I

  4. npmjs.com/~kkeeth

  5. Let’s start 😆

  6. When it comes to “Ionic”

  7. 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
  8. In short, web components. So, let’s review web components 💁

  9. WHAT IS WEB COMPONENTS?

  10. 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
  11. 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
  12. HISTORY OF WEB COMPONENTS

  13. STANDARD CONCEPTS 2011 @Fronteers Conference “Web Components and Model Driven

    Views” Mr. Alex Russell
  14. STANDARD CONCEPTS movie URL: https://vimeo.com/33430613

  15. POLYMER About 2 years later, in 2013, Google created the

    library.
  16. 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 💁
  17. SOME LIBRARIES FOR WEB COMPONENTS ▸ WebComponents.org ▸ The Component

    Gallery ▸ generic-components ▸ web-components-examples ▸ awesome-standalones ▸ accessible_components ▸ Kickstand UI
  18. Let's play with web components lightly!!

  19. CUSTOM ELEMENTS

  20. 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.
  21. ▸ 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
  22. ▸ 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
  23. ▸ Incidentally, it can be styled with CSS like other

    HTML elements WEB COMPONENTS BASICS
  24. ▸ Add an attribute (like “props”) to display this value

    WEB COMPONENTS BASICS
  25. ▸ First, add a constructor ▸ Next, add a method

    to detect attributes WEB COMPONENTS BASICS
  26. Note that you must specify “static” to use it 💁

    WEB COMPONENTS BASICS
  27. ▸ Finally, make minor modi fi cations to the description

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

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

    work ▸ “connectedCallback” runs on de fi ne 💁 WEB COMPONENTS BASICS
  30. SHADOW DOM

  31. 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
  32. SHADOW DOM

  33. ▸ 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
  34. ▸ Shadow DOM can be manipulated like any other DOM

    element SHADOW DOM
  35. HTML TEMPLATES

  36. HTML TEMPLATES

  37. ▸ 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
  38. HTML TEMPLATES

  39. 🙇 Sorry … 🙇 I will add the HTML template

    “slot” later when I upload the slides!!
  40. RELATIONSHIP TO EACH FRAMEWORK

  41. RELATIONSHIP TO EACH FRAMEWORK Image by: https://custom-elements-everywhere.com/

  42. RELATIONSHIP TO EACH FRAMEWORK Image by: https://custom-elements-everywhere.com/

  43. RELATIONSHIP TO EACH FRAMEWORK Image by: https://custom-elements-everywhere.com/

  44. RELATIONSHIP TO EACH FRAMEWORK Image by: https://custom-elements-everywhere.com/

  45. RELATIONSHIP TO EACH FRAMEWORK Image by: https://vuejs.org/guide/extras/web-components.html

  46. RELATIONSHIP TO EACH FRAMEWORK Image by: https://reactjs.org/docs/web-components.html#gatsby-focus-wrapper

  47. HAVE FUN WITH “WEB COMPONENTS” 😆

  48. None