Let’s start the Web Components

Transcript

1. Let’s start the Web Components k-kuwahara @kuwahara_jsri @clown0082 Oct 30, 2018 ʲαϙʔλʔζCoLabษڧձʳ
2. About me const my_info = { Workplace: ‘Yumemi Inc’, Community: ‘Riot.js, Ionic, DIST’, Favorites: ‘npm k-kuwahara ’, PokemonGO: ‘TL38’ }
3. github.com/riot
4. Sorry... # Because of time, I don’t mention all the grammar of JavaScript.
5. ⚠Attention⚠ We verified this slide with Google Chrome. Please check other browsers by yourself.
6. What is “Web Components” ? How to program Custom Elements Shadow DOM ES Modules Practical usage Agenda
7. What is Web Components?
8. …before that
9. A bit of background
10. Component-oriented framework of JavaScript
12. ⚙ ⚙
13. ⚙ ⚙ ❌
14. Is there something that doesn’t depend on any libraries?
15. any ⚙ ⚙ ⚙ ⚙
17. What is “Web Components” ?
19. Works on “modern” browser
20. No libraries required ❗ No packages required ❗ No modules required ❗
21. No libraries required ❗ No packages required ❗ No modules required ❗ It doesn’t depend on tools or libraries
22. ɹ Header Footer Navigation Bars (13 menus) Margen Sub Condition1 (list) Sub Condition2 (list) Main Condition2 (list) Main Condition3 (list) Main Condition1 (list)
23. ɹ Header Footer Navigation Bars (13 menus) Margen Sub Condition1 (list) Sub Condition2 (list) Main Condition2 (list) Main Condition3 (list) Main Condition1 (list)
24. ɹ Header Footer Navigation Bars (13 menus) Margen Sub Condition1 (list) Sub Condition2 (list) Main Condition2 (list) Main Condition3 (list) Main Condition1 (list) Scope works (so-called encapsulation)
25. How to program
26. Web Components is based on three specifications.
27. Custom Elements Shadow DOM ES Modules Three specifications ※ HTML Imports
28. HTML Imports ?
29. ⚠Attention⚠ “HTML Imports” is deprecate and will remove
30. 1. Custom Elements
31. Custom Elements is a function for creating your own custom HTML elements. Custom Elements can have its own script action and CSS styling. This is part of web components, but you can use it alone. Custom Elements see also: https://developer.mozilla.org/ja/docs/Web/Web_Components/Custom_Elements
33. custom elements, name is “-” required inheritance of HTMLElement class is required
34. lifecycle methods
35. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks
36. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks Invoked when the custom element is created or updated.
37. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks Invoked each time the custom element is appended into HTML document.
38. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks Invoked each time the custom element is disconnected from the document's DOM.
39. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks Invoked each time the custom element is moved to a new HTML document.
40. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks Invoked each time one of the custom element's attributes is added, removed, or changed.
41. constructor() connectedCallback() disconnectedCallback() attributeChangedCallback(attributeName, oldValue, newValue, namespace) adoptedCallback(oldDocument, newDocument) lifecycle callbacks ※Which attributes to notice change for is specified in a static get observedAttributes method
43. define the name of the attribute you want to monitor
44. It must be returned as an array of strings
45. using getter/setter
46. Will not DOM be drawn without being styled depending on the drawing timing ?
48. whenDefined method is return “Promise”
49. 2. Shadow DOM
50. The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree. Shadow DOM see also: https://developer.mozilla.org/ja/docs/Web/API/ShadowRoot
52. Encapsulation !!
54. How to create Shadow DOM
56. Element.attachShadow method creates Shadow DOM
57. Unless there is a particular reason, in “open” mode
58. Shadow DOM styling
59. :host(<selector>) :host-content(<selector>) ::slotted(<selector>) Shadow DOM styling
60. 3. ES Modules
61. See this link↓↓ https://developer.mozilla.org/ja/docs/Web/ JavaScript/Reference/Statements/import Sorry…
62. Browser compatibility
63. image by: https://caniuse.com/#search=custom%20elements
64. image by: https://caniuse.com/#search=shadow%20dom
65. image by: https://caniuse.com/#search=modules
66. Practical usage
67. Use “lit-html” Use “Polymer” Use “webcomponents.js” Combine with other UI libraries Practical usage
68. Web Components for future change, migration Standardize and coexist with other frameworks In the end
69. Have fun with Web Components!!
70. Publicity
71. We’re looking for Engineers!!