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

Style 05-02

Shadow DOM

Component Styles

• Components can have its own styles

  • ​Automatic CSS Scoping 

• CSS Encapsulation Strategy

  1. Emulated Shadow DOM

  2. 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

SpeakerDeck

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

• ng-conf 2018 update

• Documentation

• Demo (local)

  • Source

@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!