Angular x
Web Components

Suguru Inatomi

about me

- laco / Suguru Inatomi
- Work @Kaizen Platform
- Frontend Dev.
- ng-japan Organizer
- Angular Contributor
6/16 ng-japan 2018

Agenda
1. Angular "on" WC
2. Angular "with" WC
3. Angular "for" WC
1. Angular "on" WC
-
Custom Elements
-
Shadow DOM
-
Template
-
HTML Imports
Web Components
Custom Elements
Angular Component



Component is like CE
-
Emulating Custom Elements
-
Custom Tag
-
as HTMLUnknownElement
-
-
Input: Custom Attributes
-
Output: Custom Events
-
Component Style Guide
-
SHOULD Use kebab-case selector
-
Follow CE specification
-

Shadow DOM
Component Styles
-
Components can have its own styles
-
Automatic CSS Scoping
-
-
CSS Encapsulation Strategy
- Emulated Shadow DOM
-
Native Shadow DOM Support
- DEMO
-
Emulated
-
Run everywhere (Angular supports IE9)
-
Robust / well-tested
-
A bit of performance overhead
-
-
Native
-
Require browser support
-
No overhead
-
Emulated vs Native
2. Angular "with" WC
- 100% Support!
- Same to native elements / components
- [propName]
- [attr.foo]
- (eventName)
Custom Elements Support

CUSTOM_ELEMENTS_SCHEMA

- Enable to use Unknown Tags
- DEMO



Web Platform Collaboration
- Create: Polymer
- Publish: Web Components
- Use: Angular

3. Angular "for" WC
-
Vanilla JS
-
extends HTMLElement
-
-
Polymer
-
extends PolymerElement
-
-
Vue
-
vue build --target wc
-
-
Angular
-
???
-
How to make CEs?
Angular Elements
Angular for www
-
Angular components everywhere
-
Demo (local)

@angular/elements



Conclusion
-
Angular is based on Web Components
-
Angular works with Web Components
-
Angular for making Web Components
Angular x Web Components
Angular ♥ Web Components!
Thanks!

Suguru Inatomi
AngularとWeb Components
By Suguru Inatomi
AngularとWeb Components
Web Components Cafe #2
- 6,483