Reusable UIs with Web Components

Cory Rylan

Cory Rylan

- Google Developer Expert for Angular and Web

- Front End Developer @ VMware, Clarity Design Team

- Angular Bootcamp Instructor

@coryrylan

coryrylan.com

Google Developer Experts Graphic

Clarity Design Graphic

https://clarity.design

- Static HTML / CSS

- Angular Components

- Web Component based icons system

- Design/UX Guidelines

What are Web Components?

A collection of Web APIs

- Custom Elements

- Shadow DOM

- HTML Templates

- ES2015 Modules

- CSS Custom Properties

Why Web Components?

Web Standards

- Component model

- Lightweight and fast

Rocket Ship Graphic

Why Web Components?

Encapsulation

- CSS, Template, Behavior

- Well defined themes with Custom CSS Properties

- No need for Global CSS

Why Web Components?

Reusablity

- Cross framework/library support

- custom-elements-everywhere.com

(sort of)

Browser Support?

IE11+ support is possible with polyfills

Graphic of browser support with Custom Elements and Web Components. All browsers supported with the exception of ie11.

Edge in development!

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

Graphic of custom elements tracking issue for the Edge browser

Graphic of Shadow DOM tracking issue for the Edge browser

Code Demo

Graphic of code in progress

Web Component Authoring

Angular Elements

Polymer and lit-html

Stencil JS & Ionic

Vue Component Wrapper

Framework Demo

Heart Graphic

Cover of Web Component Essentials Book

webcomponentessentials.com

Thank You

coryrylan.com

@coryrylan

Made with Slides.com