Les Web Components sont un ensemble de quatre spécifications (Templates, Shadow DOM, Custom Elements, HTML imports). Ils nous permettent de résoudre beaucoup de problèmes du web traditionnel notamment les conflits de styles CSS et le manque d'expressivité des balises HTML.
Cependant leurs utilisations de façon brute dans le web d'aujourd'hui est un peu compliqué et rend l'adoption des Web Components lente.
Heureusement des frameworks comme Angular sont là pour nous aider à prendre de l'avance en nous fournissant des mécanismes nous permettant de développer des applications web respectant les spécifications des Web Components.
Dans ce talk, nous allons tout d'abord voir les problèmes posés par le web traditionnel.
Nous allons ensuite parler des spécifications des Web Components et comment elles aident à résoudre ces problèmes.
Nous finirons par voir la place de Angular dans ce nouveau paradigme
6. 6
No Native Templating System
Problem
1
No Native Templating System
Importing some JavaScript
on a page is easy
Importing some CSS on a
page is easy
<style><script>
7. 7
No Native Templating System
Problem
1
No Native Templating System
Importing some HTML is more difficult
+ Simple
+ Inert
- Content not parsed (XSS
vulnerabilities)
+ Easy to clone
- Not inert
HTML as a script tag Hidden DOM element
9. 9
No CSS Scoping/Encapsulation
There is no way to encapsulate CSS
Naming Conflicts
Inheritance conflicts
Use of !important to force
styles
Problem
3
No CSS Scoping/Encapsulation
CSS Selectors are Global CSS Specificity
10. 10
No Native Bundling System
How to bundle some HTML, CSS and JS together ?
Problem
4
No Native Bundling System
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
18. 18
Custom Elements
Define the element
JavaScript API
Define Your Own HTML Element
Native HTML element
Other developers elements
Extend Existing Elements
19. 19
Custom Elements : Defining the content
Hides away implementation details
Shadow DOM
Placeholder for structuring a
custom element
Template
20. 20
Custom Elements : Lifecycle Callbacks
When the element is
created
constructor
When the element is
inserted into the DOM
connectedCallback
The element is removed
from the DOM
disconnectedCallback
When the element is
moved into another
document
adoptedCallback
When an observed
attribute is changed
attributeChangedCallback
27. 27
DOM vs Shadow DOM
Two main differences
• Creation
• Behaviour
1. Create DOM nodes
2. AppendChild
DOM
1. Create a scoped DOM tree
2. Attach it to an element
Shadow DOM
Shadow host Shadow tree
28. 28
Creating a shadow DOM
let host = document.querySelector('#host');
const shadowRoot = host.attachShadow({mode : 'open'});
shadowRoot.innerHTML = `<h1>I am in the shadows</h1>`;
40. 40
…not The Same Objectives
Server-side rendering
Native rendering engine for mobile
Many more
Angular Has Other Objectives
Ads vs Google Chrome
Applications vs
Components
41. 41
Angular Component
The Logic
A class
HTML Markup
Directives
A template
How to tie the class and the
template together ?
Metadata
44. 44
View Encapsulation
Angular adds the CSS to the
global styles
None
Angular processes and
rename the CSS code
Emulated
Angular uses the browser's
native shadow DOM
implementation
Native
