Building reusable Web components with Angular
summary
Creates a reusable "bb-red-strawberry" web component from an HTML <template>, using connectedCallback and attributeChangedCallback to clone and update content, and encloses it with shadow DOM and named slots for safe composition. Builds the same component from Angular with ng add @angular/elements, sets viewEncapsulation to ShadowDom, calls customElements.define and adjusts tsconfig target to es2015. Uses polyfills and ng-x-build-plus to produce a single small bundle (ng-x-build-plus). Mentions lit-html / lit-html and lit-element and reports the component runs and styles are encapsulated.
AI-written summary · about
chapters (15)
- 0:00Intro
- 3:45Componentbased architecture
- 7:35Framework support
- 8:52Components
- 9:38HTML Template
- 11:59Benefits of Template
- 12:45Custom Elements
- 14:29Life Cycle of Custom Elements
- 18:27Shadow DOM
- 21:25Custom Properties
- 23:11Documentation
- 24:26Angular Element
- 33:31Web Component
- 38:35Lithas Shimmer
- 41:53Lithas Elite Element
related talks
25mWeb components with Angular: The what, the why and the how.
33mBuild Web Components with Angular Elements
28mAngular and Webcomponents
01h 18mA Deep Look At Angular Elements
19mWeb Components with Angular Elements: Beyond the Basics
28mAngular Elements: From Angular to Web Components
37mThe world of Web Components
25mI'm with Web Components and Web Components Are with Me