Web components these days

Transcript

1. WEB COMPONENTS
   THESE DAYS
   29 May, 2022
   
   
   Ionic Meetup #19 Tokyo
   @kkeeth @kuwahara_jsri @kkeeth
   

   View 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 Slide

3. Who am I
   

   View Slide

4. npmjs.com/~kkeeth
   

   View Slide

5. Let’s start 😆
   

   View Slide

6. When it comes to “Ionic”
   

   View Slide

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
   

   View Slide

8. In short, web components.
   
   
   So, let’s review web
   components 💁
   

   View Slide

9. WHAT IS
   
   
   WEB COMPONENTS?
   

   View Slide

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
    

    View Slide

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
    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 Slide

12. HISTORY OF
    
    
    WEB COMPONENTS
    

    View Slide

13. STANDARD CONCEPTS
    2011 @Fronteers Conference
    
    
    “Web Components and
    Model Driven Views”
    Mr. Alex Russell
    

    View Slide

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

    View Slide

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

    View Slide

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 💁
    

    View Slide

17. SOME LIBRARIES FOR WEB COMPONENTS
    ▸ WebComponents.org
    
    
    ▸ The Component Gallery
    
    
    ▸ generic-components
    
    
    ▸ web-components-examples
    
    
    ▸ awesome-standalones
    
    
    ▸ accessible_components
    
    
    ▸ Kickstand UI
    

    View Slide

18. Let's play with
    
    
    web components lightly!!
    

    View Slide

19. CUSTOM
    ELEMENTS
    

    View Slide

20. WEB COMPONENTS BASICS
    ▸ The sample “” tag
    is here.
    
    
    ▸ We need to use ‘-’ in the element
    name to avoid interfering with
    html standard elements.
    

    View Slide

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
    

    View Slide

22. ▸ 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

29. ▸ We need to add a line to
    make them work
    
    
    ▸ “connectedCallback”
    runs on de
    fi
    ne 💁
    WEB COMPONENTS BASICS
    

    View Slide

30. SHADOW DOM
    

    View Slide

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
    

    View Slide

32. SHADOW DOM
    

    View Slide

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

    View Slide

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

    View Slide

35. HTML
    TEMPLATES
    

    View Slide

36. HTML TEMPLATES
    

    View Slide

37. ▸ 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 Slide

38. HTML TEMPLATES
    

    View Slide

39. 🙇 Sorry … 🙇
    
    
    I will add the HTML template “slot” later
    when I upload the slides!!
    

    View Slide

40. RELATIONSHIP TO
    EACH FRAMEWORK
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. HAVE FUN WITH “WEB
    COMPONENTS” 😆
    

    View Slide

48. View Slide