Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry...
Transcript of Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry...
![Page 1: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/1.jpg)
Web Components with Angular
@Sherrrylst
![Page 2: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/2.jpg)
Hello!I’m Sherry ListAzure Developer Technical Lead, MicrosoftWomen Techmaker Lead
You can find me at @SherrryLst
![Page 3: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/3.jpg)
Angular Components
@Sherrrylst
![Page 4: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/4.jpg)
Angular Components
Web components
@Sherrrylst
![Page 5: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/5.jpg)
Angular Components
Web components
Angular Elements
@Sherrrylst
![Page 6: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/6.jpg)
Angular Components
Web components
Angular Elements
What’s next?
@Sherrrylst
![Page 7: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/7.jpg)
(Angular) Components
@Sherrrylst
![Page 8: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/8.jpg)
@Sherrrylst
![Page 9: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/9.jpg)
What’s missing:
● Actual style encapsulation (nothing leaks in or out without being explicitly allowed)
@Sherrrylst
![Page 10: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/10.jpg)
● Actual style encapsulation (nothing leaks in or out without being explicitly allowed)
● Ways of allowing some styling of these elements
What’s missing:
@Sherrrylst
![Page 11: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/11.jpg)
What’s missing:
● Actual style encapsulation (nothing leaks in or out without being explicitly allowed)
● Ways of allowing some styling of these elements
● Be able to use elements across teams using different frameworks (or none)
@Sherrrylst
![Page 12: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/12.jpg)
What’s missing:
● Actual style encapsulation (nothing leaks in or out without being explicitly allowed)
● Ways of allowing some styling of these elements
● Be able to use elements across teams using different frameworks (or none)● Create elements declaratively, but still use JS when needed (to filter lists etc) or hook
up bindings - maybe something like JSX - we want flexibility, and not another templating language
@Sherrrylst
![Page 13: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/13.jpg)
What does have all these things?
What does?
@Sherrrylst
![Page 14: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/14.jpg)
Web Componentsprovides a lot of this
@Sherrrylst
![Page 15: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/15.jpg)
A component that is platform agnostic
Their main goal is to encapsulate the code for the components into a nice,
reusable package for maximum interoperability.
@Sherrrylst
![Page 16: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/16.jpg)
Check out: https://custom-elements-everywhere.com/
@Sherrrylst
![Page 17: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/17.jpg)
@Sherrrylst
![Page 18: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/18.jpg)
Web components consist of three main technologies:
● HTML template● Custom Elements● Shadow DOM● HTML imports
@Sherrrylst
![Page 19: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/19.jpg)
● HTML template
<template> </template>
1
Web components consist of three main technologies:
@Sherrrylst
![Page 21: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/21.jpg)
HTML Template
<template id="my-shiny-template">
<div class="template__container">
<img class="template__image">
<div class="template__info">
</div>
</div>
</template>
@Sherrrylst
![Page 22: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/22.jpg)
HTML Template
<div id="image-gallery" class="template__grid"><!-- existing image containers will be included here -->
</div>
@Sherrrylst
![Page 23: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/23.jpg)
HTML Template
const template = document.querySelector('#red-strawberry-template');
@Sherrrylst
![Page 24: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/24.jpg)
HTML Template
const template = document.querySelector('#red-strawberry-template');
// Add the first imageconst imgTag = template.content.querySelector("img");imgTag.src = "strawberry.jpg";imgTag.alt = "Strawberries on the table";
@Sherrrylst
![Page 25: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/25.jpg)
HTML Template
const template = document.querySelector('#red-strawberry-template');
// Add the first imageconst imgTag = template.content.querySelector("img");imgTag.src = "strawberry.jpg";imgTag.alt = "Strawberries on the table";
// Add the first contentconst info = template.content.querySelector("span");info.textContent = "Stawberries from Sherry's garden";
@Sherrrylst
![Page 26: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/26.jpg)
HTML Template
// Clone the new gallery and insert the DOMconst imageGallery = document.querySelector("#image-gallery");
@Sherrrylst
![Page 27: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/27.jpg)
HTML Template
// Clone the new gallery and insert the DOMconst imageGallery = document.querySelector("#image-gallery");const clone = document.importNode(template.content, true);
@Sherrrylst
![Page 28: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/28.jpg)
HTML Template
// Clone the new gallery and insert the DOMconst imageGallery = document.querySelector("#image-gallery");const clone = document.importNode(template.content, true);imageGallery.appendChild(clone);
@Sherrrylst
![Page 29: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/29.jpg)
Why HTML templates?
@Sherrrylst
• Browser parse it once
• Fast
• Easy to use
![Page 30: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/30.jpg)
● HTML Template● Custom Elements 2
Web components consist of three main technologies:
@Sherrrylst
![Page 31: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/31.jpg)
<red-button></red-button>
<my-unique-wc></my-unique-wc>
Naming your custom element
@Sherrrylst
![Page 32: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/32.jpg)
<my-unique-wc
title="I am a Title"
xyz="No idea what I am!"></my-unique-wc>
Naming the attributes
@Sherrrylst
![Page 33: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/33.jpg)
Native Angular React Vue
constructor ngOnInit Constructor Creates
connectedCallback ngAfterContentChecked componentDidMount mounted
disconnectedCallback ngOnDestroy componentWillUnmount destroy
attributeChangedCallback ngOnChanges componentDidUpdate updated
Custom elements lifecycle
Source: https://youtu.be/j-5uodRMW_Q@Sherrrylst
![Page 34: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/34.jpg)
Custom elements
<bb-red-strawberry
img="strawberry.jpg"
description="Strawberries from Sherry's Garden">
</bb-red-strawberry>
@Sherrrylst
![Page 35: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/35.jpg)
Custom elements
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
}
}
@Sherrrylst
![Page 36: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/36.jpg)
Custom elements
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
}
}
// Define custom element
customElements.define("bb-red-strawberry", BBRedStrawberryElement);
@Sherrrylst
![Page 37: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/37.jpg)
Custom elements
connectedCallback() {this.innerHTML = template;this._$image = this.querySelector("#element-image");this._$description = this.querySelector("#element-description");this._render(this);
}
@Sherrrylst
![Page 38: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/38.jpg)
Custom elements
_render({ img, description }) {description = description || "Description is missing";this._$image.alt = description;this._$image.src = img || "missing-image.jpg";
const figcaption = document.createElement("figcaption");figcaption.textContent = description;figcaption["aria-label"] = "product name";this._$description.appendChild(figcaption);
}
@Sherrrylst
![Page 39: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/39.jpg)
Custom elements
…static get observedAttributes() {return ["description", "img"];}
attributeChangedCallback(name, oldValue, newValue) {this[name] = newValue;}
...
@Sherrrylst
![Page 41: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/41.jpg)
@Sherrrylst
![Page 42: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/42.jpg)
Global CSS
<style>
p {
font-family: 'Lato', sans-serif;
font-size: 0.9em;
max-width: 760px;
line-height: 1.6em;
color: red;
}@Sherrrylst
![Page 43: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/43.jpg)
@Sherrrylst
![Page 44: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/44.jpg)
● HTML Template● Custom Elements● Shadow DOM 3
Web components consist of three main technologies:
@Sherrrylst
![Page 45: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/45.jpg)
Shadow DOM
https://girliemac.com/presentation-slides/webcomponents/images/dom-tree.png
![Page 46: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/46.jpg)
Shadow DOMclass BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
// Shadow DOM
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
@Sherrrylst
![Page 47: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/47.jpg)
Slots
@Sherrrylst
![Page 48: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/48.jpg)
Shadow DOM
@Sherrrylst
![Page 49: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/49.jpg)
Template
...
<img id="shadow-image" class="shadow__image">
<div id="shadow-info" class="shadow__info">
<slot name="title" id="title" role="header" class="shadow__title"></slot>
<slot name="description" id="description" class="shadow__description"></slot></div>
...
@Sherrrylst
![Page 50: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/50.jpg)
Custom Element
<bb-red-strawberry
img="strawberry.jpg">
<div slot="title"><i>Strawberries</i></div>
<div slot="description">Sherry's berries finest strawberries</div></bb-red-strawberry>
@Sherrrylst
![Page 51: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/51.jpg)
CSS Custom Properties
@Sherrrylst
![Page 52: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/52.jpg)
Shadow DOM
@Sherrrylst
![Page 53: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/53.jpg)
Template
<style>
.container {width: 320px;
height: 280px;
background-color: var(--background-color, #fff);
}
<style>
@Sherrrylst
![Page 54: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/54.jpg)
CSS custom properties
<bb-red-strawberry
img="strawberry.jpg"
style="--background-color: #A11B38;"><div slot="title"><i>Strawberries</i></div>
<div slot="description">Sherry's berries finest strawberries</div>
</bb-red-strawberry>
@Sherrrylst
![Page 55: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/55.jpg)
Remember:Documentation
@Sherrrylst
![Page 56: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/56.jpg)
:host
@Sherrrylst
![Page 57: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/57.jpg)
Template
<style>
:host(bb-red-strawberry) {/* Applies if the host is a <bb-red-strawberry> element.*/
font-weight: bold;
width: 320px;
height: 280px;
background-color: var(--background-color, #fff);
box-shadow: 0 2px 2px 0 rgba (0, 0, 0, .14);
border-radius: 2px;
}
<style>@Sherrrylst
![Page 59: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/59.jpg)
@Sherrrylst
![Page 60: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/60.jpg)
Global CSS
<style>
p {
font-family: 'Lato', sans-serif;
font-size: 0.9em;
max-width: 760px;
line-height: 1.6em;
color: red;
}@Shrrrylst @Sherrrylst
![Page 62: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/62.jpg)
We made it!@Sherrrylst
![Page 63: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/63.jpg)
@Sherrrylst
![Page 64: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/64.jpg)
Angular Elements
@Sherrrylst
![Page 65: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/65.jpg)
npm i -g @angular/cli
terminal
@Sherrrylst
![Page 66: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/66.jpg)
npm i -g @angular/cli
ng new bb-card --prefix bb --inline-template --style=scss
terminal
@Sherrrylst
![Page 67: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/67.jpg)
npm i -g @angular/cli
ng new bb-card --prefix bb --inline-template --style=scss
cd bb-card
terminal
@Sherrrylst
![Page 68: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/68.jpg)
npm i -g @angular/cli
ng new bb-card --prefix bb --inline-template --style=scss
cd bb-card
ng add @angular/elements
terminal
@Sherrrylst
![Page 69: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/69.jpg)
npm i -g @angular/cli
ng new bb-card --prefix bb --inline-template --style=scss
cd bb-card
ng add @angular/elements
npm install @webcomponents/custom-elements --save
terminal
@Sherrrylst
![Page 70: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/70.jpg)
import '@webcomponents/custom-elements/custom-elements.min';
polyfills.ts
@Sherrrylst
![Page 71: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/71.jpg)
{
"compileOnSave": false,
"compilerOptions": {
…
"target": "es2015",
….
}
}
}
tsconfig.json
@Sherrrylst
![Page 72: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/72.jpg)
ng generate component card
terminal
@Sherrrylst
![Page 73: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/73.jpg)
card.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'bb-card',
template: ` ...`,
styleUrls: ['./bb-card.scss'],
})
export class CardComponent implements OnInit {
constructor() { }
ngOnInit() {}
}@Sherrrylst
![Page 74: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/74.jpg)
Look back...@Sherrrylst
![Page 75: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/75.jpg)
Web component (Native)
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
customElements.define("bb-red-strawberry", BBRedStrawberryElement);
![Page 76: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/76.jpg)
Web component (Native)
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
customElements.define("bb-red-strawberry", BBRedStrawberryElement);
![Page 77: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/77.jpg)
ViewEncapsulation.ShadowDom
This encapsulation mode uses the Shadow DOM to scope styles only to this
specific component.
@Sherrrylst
![Page 78: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/78.jpg)
card.component.ts
import { Component, OnInit, ViewEncapsulation, Input } from
'@angular/core';
@Component({
selector: 'bb-card',
template: ` ...`,
styleUrls: ['./bb-card.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
@Sherrrylst
![Page 79: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/79.jpg)
Make our code Angular friendly
@Sherrrylst
![Page 80: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/80.jpg)
card.component.ts
template: `
<img id='shadow-image' class='shadow__image' src=‘{{ img }}' alt='title'>
<div id='shadow-info' class='shadow__info'>
<h1 name='title' id='title' role='header' class='shadow__title'>{{ title }}</h1>
<p name='description' id='description' class='shadow__description'>{{ description }}</p>
</div>
`
@Sherrrylst
![Page 81: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/81.jpg)
card.component.ts
export class CardComponent implements OnInit{
@Input() title?: string = 'default title';
@Input() description?: string = 'default description';
@Input() img?: string = 'undefined.png';
constructor() { }
ngOnInit() {}
}
@Sherrrylst
![Page 82: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/82.jpg)
card.component.scss:host {
display: block;
width: 320px;
height: 300px;
background-color: var(--background-color, #fff);
[...]
.shadow__image {
[...]
}
.shadow__info {
[...]
}
}@Sherrrylst
![Page 83: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/83.jpg)
Register our component in NgModule
@Sherrrylst
![Page 84: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/84.jpg)
app.module.ts
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations: [ CardComponent ],
imports: [ BrowserModule ],
entryComponents: [ CardComponent ],
})
@Sherrrylst
![Page 85: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/85.jpg)
Look back...
![Page 86: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/86.jpg)
Web component (Native)
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
customElements.define("bb-red-strawberry", BBRedStrawberryElement);
![Page 87: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/87.jpg)
Web component (Native)
class BBRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
// Define custom element
customElements.define("bb-red-strawberry", BBRedStrawberryElement);
![Page 88: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/88.jpg)
app.module.ts
@NgModule({
declarations: [CardComponent],
imports: [BrowserModule],
entryComponents: [CardComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const bbCard = createCustomElement(CardComponent, { injector });
customElements.define('bb-card', bbCard);
}
@Sherrrylst
![Page 89: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/89.jpg)
app.module.ts
@NgModule({
declarations: [CardComponent],
imports: [BrowserModule],
entryComponents: [CardComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const bbCard = createCustomElement(CardComponent, { injector });
customElements.define('bb-card', bbCard);
}
ngDoBootstrap() {}} @Sherrrylst
![Page 90: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/90.jpg)
ng build
terminal
@Sherrrylst
![Page 92: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/92.jpg)
@Sherrrylst
![Page 93: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/93.jpg)
Wait a min
@Sherrrylst
![Page 94: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/94.jpg)
build
@Sherrrylst
![Page 95: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/95.jpg)
● Huge bundle size● No support for one bundle● -> Eject● Complicated!
It’s not that easy!
@Sherrrylst
![Page 96: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/96.jpg)
ngx-build-plus@ManfredSteyer
Check out: https://github.com/manfredsteyer/ngx-build-plus @Sherrrylst
![Page 97: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/97.jpg)
● Extends Cli● No Eject● Build a single bundle● No need to add Angular multiple
times to your project● Universal module
It’s #awesome!
@Sherrrylst
![Page 98: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/98.jpg)
ng add ngx-build-plus
terminal
@Sherrrylst
![Page 99: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/99.jpg)
angular.json
[...]
"architect": {
"build": {
"builder": "ngx-build-plus:build",[...]
}
}
[...]
@Sherrrylst
![Page 100: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/100.jpg)
webpack.extra.js
module.exports = { "externals": {
"rxjs": "rxjs","@angular/core": "ng.core","@angular/common": "ng.common","@angular/platform-browser": "ng.platformBrowser","@angular/elements": "ng.elements"
}}
@Sherrrylst
![Page 101: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/101.jpg)
ng build --prod
--extraWebpackConfig webpack.extra.js
--output-hashing none
--single-bundle true
terminal
@Sherrrylst
![Page 102: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/102.jpg)
Now our component is ready!
@Sherrrylst
![Page 103: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/103.jpg)
IvyThe new backwards-compatible Angular renderer:
● Speed improvements
● Bundle size reduction
● Increasing flexibility
@Sherrrylst
![Page 104: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/104.jpg)
How do we use it?
@Sherrrylst
![Page 105: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/105.jpg)
npm install @webcomponents/custom-elements --save
terminal
@Sherrrylst
![Page 106: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/106.jpg)
import '@webcomponents/custom-elements/custom-elements.min';
polyfills.ts
@Sherrrylst
![Page 107: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/107.jpg)
app.component.ts
import { Component } from '@angular/core';
import * as bbCard from '../web-components/bb-card/bb-card.js';@Component({
selector: 'berry-root',template: `
<bb-card title='Strawberries' description='Fresh from Sherry garden' img='../assets/images/strawberry-unx.jpeg' style="--background-color: #A11B38; --color: #ffffff;"> loading...
</bb-card>`',
styleUrls: ['./app.component.css']})export class AppComponent {...}
@Sherrrylst
![Page 108: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/108.jpg)
@Sherrrylst
![Page 109: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/109.jpg)
app.module.ts
@NgModule({
[…]
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {
}
@Sherrrylst
![Page 111: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/111.jpg)
✅Web components fundamentals
✅ Create a web component
✅ Create a web component with Angular
✅ How to build an Angular element
✅ Add a web component to an existing
Angular project
We are almost done!
@Sherrrylst
![Page 112: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/112.jpg)
Web Components rock?
@Sherrrylst
![Page 113: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/113.jpg)
● Maximum interoperability
● Support from Frameworks (Tooling)
● Many success stories
● Browsers are ready
Yes they DO!
@Sherrrylst
![Page 115: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/115.jpg)
What’s next? @Sherrrylst
![Page 117: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/117.jpg)
What is lit-html?
• Small library
• <template> in JS with template literal
• Extremely fast (Partial update)
• Customizable and extensible (Directives)
🛠 Status: In Development @Sherrrylst
![Page 118: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/118.jpg)
import { render, html } from 'lit-html';
class BbRedStrawberryElement extends HTMLElement {
constructor() {
super();
const template = document.createElement("template");
this.attachShadow({ "mode": "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
lit-html
@Sherrrylst
![Page 119: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/119.jpg)
connectedCallback() {
render(this._render(this), this.shadowRoot);
}
lit-html
@Sherrrylst
![Page 120: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/120.jpg)
connectedCallback() {
render(this._render(this), this.shadowRoot);
}
// Defines element markup
_render({ img, title, description, productPrice, color }) {
return html`
lit-html
@Sherrrylst
![Page 121: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/121.jpg)
lit-html
<div class="main-container">
<div id="photo">
<img src=${ img || "missing.jpg" } alt=${ title || ‘N/A’ }></img>
</div>
<div id="info">
<h3 id="title" aria-label="product title">${ title || 'N/A' }</h3>
${ description ? html`<p id="description" aria-label="product description">${ description || 'N/A' }
</p>` : '' }
${ productPrice ? html` <p id="price" aria-label="product price">${ productPrice } / kilo</p>` : '' }
</div>
</div>
![Page 123: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/123.jpg)
lit-element
Check out: https://youtu.be/ypPRdtjGooc @Sherrrylst
![Page 124: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/124.jpg)
What is lit-element?
• Base class for creating web components
• Uses lit-html to render into the element’s
Shadow DOM
• React to changes
• Extremely fast & light
🛠 Status: In Development @Sherrrylst
![Page 125: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/125.jpg)
import { litElement, html } from 'lit-html';class BbRedStrawberryElement extends litElement {
static get properties() {
return {
title: { type: String },
description: { type: String },
currency: { type: String },
price: { type: String },
img: { type: String }
}
}
}
lit-element
@Sherrrylst
![Page 126: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/126.jpg)
lit-elementrender() {
return html`
<div class="main-container">
<div id="photo">
<img src=${ img || "missing.jpg" } alt=${ title || ‘N/A’ }></img>
</div>
<div id="info">
<h3 id="title" aria-label="product title">${ title || 'N/A' }</h3>
${ description ? html`<p id="description" aria-label="product description">
${ description || 'N/A' }
</p>` : '' }
${ productPrice ? html` <p id="price" aria-label="product price">
${ productPrice } / kilo</p>` : '' }
</div>
</div> `
}
![Page 127: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/127.jpg)
lit-element
Check out: https://youtu.be/ypPRdtjGooc @Sherrrylst
![Page 128: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/128.jpg)
CSS Shadow Parts::part()
Check out: https://meowni.ca/posts/part-theme-explainer/ @Sherrrylst
![Page 129: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/129.jpg)
::part
<x-foo>
#shadow-root
<div part="some-box"><span>...</span></div>
<input part="some-input">
<div>...</div> /* not styleable
</x-foo>
Check out: https://meowni.ca/posts/part-theme-explainer/ @Sherrrylst
![Page 130: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/130.jpg)
::part
At a document which has <x-foo>:
x-foo::part(some-box) { … }
x-foo::part(some-box):hover { … }
x-foo::part(some-input)::placeholder { … }
Check out: https://meowni.ca/posts/part-theme-explainer/ @Sherrrylst
![Page 131: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/131.jpg)
Web Components do ROCK!
@Sherrrylst
![Page 132: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/132.jpg)
Angular ♥Web Components
@Sherrrylst
![Page 133: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/133.jpg)
Sherry List@SherrryLst
Ana Cidre@AnaCidre_
![Page 134: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/134.jpg)
Azure for JavaScript developers
https://aka.ms/AA413rz
![Page 135: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/135.jpg)
Best practices
● https://w3ctag.github.io/webcomponents-design-guidelines/
● https://github.com/webcomponents/gold-standard/wiki
● https://developers.google.com/web/fundamentals/web-components/best-practices
@Sherrrylst
![Page 136: Web Components with Angular - Jfokus...Web Components with Angular @Sherrrylst Hello! I’m Sherry List Azure Developer Technical Lead, Microsoft Women Techmaker Lead You can find](https://reader035.fdocuments.net/reader035/viewer/2022062506/5ee32049ad6a402d666d3227/html5/thumbnails/136.jpg)
Sources
● https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-
dashboard-in-four-steps-with-web-components.aspx
● https://meowni.ca/posts/part-theme-explainer/
● https://medium.com/google-developer-experts/are-web-components-a-thing-
5a116b1da7e4
● https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components
● https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-
cli.aspx
@Sherrrylst