Angular x
Web Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/2756726/angular_high.png)
Suguru Inatomi
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)
about me
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3888213/2.png)
- laco / Suguru Inatomi
- Work @Kaizen Platform
- Frontend Dev.
- ng-japan Organizer
- Angular Contributor
6/16 ng-japan 2018
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4735774/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/2903905/Plunker_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4805568/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4805572/pasted-from-clipboard.png)
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
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4808454/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4810389/pasted-from-clipboard.png)
CUSTOM_ELEMENTS_SCHEMA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4811161/pasted-from-clipboard.png)
- Enable to use Unknown Tags
- DEMO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4817352/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4839189/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4839190/pasted-from-clipboard.png)
Web Platform Collaboration
- Create: Polymer
- Publish: Web Components
- Use: Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4843593/pasted-from-clipboard.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4646242/pasted-from-clipboard.png)
@angular/elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4818761/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4818788/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4840488/pasted-from-clipboard.png)
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!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)
Suguru Inatomi
AngularとWeb Components
By Suguru Inatomi
AngularとWeb Components
Web Components Cafe #2
- 6,485