Intro to

Web Components

We expect cooperation from all participants to help ensure a safe environment for everybody.

We treat everyone with respect, we refrain from using offensive language and imagery, and we encourage to report any derogatory or offensive behavior to a member of the JSLeague community.

We provide a fantastic environment for everyone to learn and share skills regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices.

We value your attendance and your participation in the JSLeague community and expect everyone to accord to the community Code of Conduct at all JSLeague workshops and other events.

Code of conduct

Whoami

Alexandru Albu

Trainer @JSLeague

frontend developer @10yo

design: photoshop, illustrator

development: javascript. python, sql, mongo

devops: docker

and gaming and basketball

Overview

Intro to Web Components

Intro to Web Components

Agenda

 

What are Web Components?

Hello, Web Component!

Frameworks

Why use them?

Micro frontends

A 2021 Web Component

What are Web Components?

Intro to Web Components

Intro to Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

webcomponents.org

Intro to Web Components

Enhanced Custom

HTML Elements

Intro to Web Components

Custom Elements

Shadow DOM

ES Modules

HTML Template

Hello, Web Component!

Intro to Web Components

Intro to Web Components

EXERCISE : STEP 0

Frameworks

Intro to Web Components

Intro to Web Components

Intro to Web Components

Why use them?

Intro to Web Components

Intro to Web Components

Micro Frontends

Intro to Web Components

Intro to Web Components

Intro to Web Components

A 2021 Web Component

Intro to Web Components

Intro to Web Components

EXERCISE : ALL THE STEPS!!!

Q&A

Intro to Web Components

Thank you!

Intro to Web Components

By Alex Albu

Intro to Web Components

  • 431