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

    View full-size slide

  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’,


    }

    View full-size slide

  3. npmjs.com/~kkeeth

    View full-size slide

  4. Let’s start 😆

    View full-size slide

  5. When it comes to “Ionic”

    View full-size slide

  6. 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

    View full-size slide

  7. In short, web components.


    So, let’s review web
    components 💁

    View full-size slide

  8. WHAT IS


    WEB COMPONENTS?

    View full-size slide

  9. 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

    View full-size slide

  10. 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
    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

    View full-size slide

  11. HISTORY OF


    WEB COMPONENTS

    View full-size slide

  12. STANDARD CONCEPTS
    2011 @Fronteers Conference


    “Web Components and
    Model Driven Views”
    Mr. Alex Russell

    View full-size slide

  13. STANDARD CONCEPTS
    movie URL: https://vimeo.com/33430613

    View full-size slide

  14. POLYMER
    About 2 years later, in 2013,


    Google created


    the library.

    View full-size slide

  15. 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 💁

    View full-size slide

  16. SOME LIBRARIES FOR WEB COMPONENTS
    ▸ WebComponents.org


    ▸ The Component Gallery


    ▸ generic-components


    ▸ web-components-examples


    ▸ awesome-standalones


    ▸ accessible_components


    ▸ Kickstand UI

    View full-size slide

  17. Let's play with


    web components lightly!!

    View full-size slide

  18. CUSTOM
    ELEMENTS

    View full-size slide

  19. WEB COMPONENTS BASICS
    ▸ The sample “” tag
    is here.


    ▸ We need to use ‘-’ in the element
    name to avoid interfering with
    html standard elements.

    View full-size slide

  20. ▸ 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

    View full-size slide

  21. ▸ Now that we are ready to connect, let's
    tie this to the “” 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

    View full-size slide

  22. ▸ Incidentally, it can be styled with
    CSS like other HTML elements
    WEB COMPONENTS BASICS

    View full-size slide

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

    View full-size slide

  24. ▸ First, add a constructor


    ▸ Next, add a method to
    detect attributes
    WEB COMPONENTS BASICS

    View full-size slide

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

    View full-size slide

  26. ▸ Finally, make minor
    modi
    fi
    cations to the
    description that sets the value
    WEB COMPONENTS BASICS

    View full-size slide

  27. ▸ By the way, try to see if the
    property really changes when
    you change it.


    ▸ Run the following in the console
    WEB COMPONENTS BASICS

    View full-size slide

  28. ▸ We need to add a line to
    make them work


    ▸ “connectedCallback”
    runs on de
    fi
    ne 💁
    WEB COMPONENTS BASICS

    View full-size slide

  29. 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

    View full-size slide

  30. ▸ 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
    ``, are `closed`
    SHADOW DOM

    View full-size slide

  31. ▸ Shadow DOM can be
    manipulated like any
    other DOM element
    SHADOW DOM

    View full-size slide

  32. HTML
    TEMPLATES

    View full-size slide

  33. HTML TEMPLATES

    View full-size slide

  34. ▸ Templates are de
    fi
    ned with a
    “” tag


    ▸ It is practical to give them an ID so
    that they can be referenced within
    component classes
    HTML TEMPLATES

    View full-size slide

  35. HTML TEMPLATES

    View full-size slide

  36. 🙇 Sorry … 🙇


    I will add the HTML template “slot” later
    when I upload the slides!!

    View full-size slide

  37. RELATIONSHIP TO
    EACH FRAMEWORK

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. HAVE FUN WITH “WEB
    COMPONENTS” 😆

    View full-size slide