Web components these days

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” 😆