Web components these days

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who am I const my_info = { Name: ‘Kuwahara KEETH Kiyohito’, Company: ‘Yumemi Inc’, Position: ‘Servant Leader/Board’, Skills: ‘Riot.js/Next.js/Chit-chat’, }

Slide 3

Slide 3 text

Who am I

Slide 4

Slide 4 text

npmjs.com/~kkeeth

Slide 5

Slide 5 text

Let’s start 😆

Slide 6

Slide 6 text

When it comes to “Ionic”

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

WHAT IS WEB COMPONENTS?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

HISTORY OF WEB COMPONENTS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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 💁

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Let's play with web components lightly!!

Slide 19

Slide 19 text

CUSTOM ELEMENTS

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

▸ 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

Slide 22

Slide 22 text

▸ 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

▸ By the way, try to see if the property really changes when you change it. ▸ Run the following in the console WEB COMPONENTS BASICS

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

SHADOW DOM

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

SHADOW DOM

Slide 33

Slide 33 text

▸ 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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

HTML TEMPLATES

Slide 36

Slide 36 text

HTML TEMPLATES

Slide 37

Slide 37 text

▸ 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

Slide 38

Slide 38 text

HTML TEMPLATES

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

RELATIONSHIP TO EACH FRAMEWORK

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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