This document discusses web components and custom elements. It provides an overview of the specifications for templates, HTML imports, shadow DOM, and custom elements. It then demonstrates how to define a custom element class in JavaScript that extends built-in elements and can have attributes, properties, events, and lifecycle methods. The document explains that Angular components can be wrapped in custom elements, allowing them to be used outside of Angular. It provides a demo of creating a custom element from an Angular component using the createCustomElement method. The document concludes by discussing upcoming improvements in Angular Ivy, the CLI, and browser support that will enhance the use of custom elements.

2. ANGULAR DAY 2018

3. DEVELOPER & CONSULTANT
MICHELE STIEVEN
Social

4. Web components
A set of APIs to create your own
custom elements

5. Specifications
•HTML Templates
•HTML Imports
•Shadow Dom
•Custom Elements

6. Templates
<template>
<p>You don’t see me!</p>
<p>Call me later!</p>
</template>

7. Imports
<link rel=“import” href=“hello.html”>

8. Shadow dom
<my-component>
#shadow-root
<style>.a { color: red }</style>
<p class=“a”>I’m red!</p>
</my-component>

9. Custom elements
EXTEND THE BROWSER VOCABULARY
DIV
P
H1
MY-COMPONENT

10. class MyComponent extends HTMLElement { … }
customElements.define(‘my-comp’, MyComponent)
Not that easy…

11. class MyComponent extends HTMLElement {
}
Attributes
static get observedAttributes() {
return [‘label’, ‘value’];
}
attributeChangedCallback(name, old, new) {
switch(name) {
// Do something
}
}

12. class MyComponent extends HTMLElement {
}
Properties
get label() {
return this.getAttribute(‘label’);
}
set label(value) {
this.setAttribute(‘label’, value);
}
let myComp = document.querySelector(‘my-comp’);
myComp.label = “Hey!”

13. class MyComponent extends HTMLElement {
}
Events
emitValueChange {
let myEvent = new CustomEvent(‘value-change’, {
value: this.value
})
this.dispatchEvent(myEvent);
}
let myComp = document.querySelector(‘my-comp’);
myComp.addEventListener(‘value-change’, e => … );

14. class MyComponent extends HTMLElement {
}
constructor() { super() }
connectedCallback() { … }
disconnectedCallback() { … }
attributeChangedCallback() { … }
Reactions
…or lifecycle hooks ?

15. From the outside…
• Attributes
• Properties
• Events
• Methods
They work just like native elements!

17. they Work Everywhere

18. You can already use Custom Elements
inside your Angular app!
You cannot use Angular Components
outside of Angular.
Situation

19. ANGULAR
ELEMENTS
You create an Angular component.
Angular wraps it into a Custom Element!

20. Component
Element
Attributes ListenersProperties

21. Component
<my-component>
Angular VanillaReact

22. @Component({ … })
export class MyComponent {}
How?
import { createCustomElement } from ‘@angular/elements’;
customElements.define(‘my-comp’, MyElement);
const MyElement = createCustomElement(MyComponent, {
injector: someInjector
});

23. DEMO

24. ANGULAR 7
TO BE CONTINUED IN
• IVY will reduce Angular size
• IVY will solve conflicts between versions
• The CLI will make the process smoother
• Browsers will have better support for Custom
Elements v1 (no polyfills required)

25. thanks!
CODE
https://goo.gl/LjVPBs