Web Components & Stencil.js

Udemy: https://www.udemy.com/course/web-components-stenciljs-build-custom-html-elements/

Stencil: https://stenciljs.com/docs/getting-started

2. Refreshing Next Generation JavaScript

Callbacks vs Promises vs RxJS vs async/await: https://academind.com/tutorials/callbacks-vs-promises-vs-rxjs-vs-async-awaits

JS Array Functions

Array Methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

3. Understanding the Basics

[[Web Components - Creating elements with JS]]

4. Diving Deeper Into Web Components

Code 4.48: stencil_code/my

Code 4.50: stencil_code/advanced-03-observing-attribute-changes

4.41. Understanding Shadow DOM Projection

4.42. Styling "slot" Content Outside of the Shadow DOM

4.43. Styling "slot" Content Inside the Shadow DOM

4.44. Styling the Host Component

4.45. Styling Components from Outside

4.46. Conditional Host Styling

4.47. Styling with the Host Content in Mind

4.48. Smart Dynamic Styling with CSS Variables

Code 4.48: stencil_code/my

4.49. Cleaning Up Our Overall Styling

4.50. Observing Attribute Changes

Code 4.50: stencil_code/advanced-03-observing-attribute-changes

4.51. Adjusting the Component Behaviour Upon Attribute Changes

4.52. Using "disconnectedcallback"

4.53. Adding a Render Method

Useful Resources & Links

More about Templates & Slots: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
Google Article on Custom Elements: https://web.dev/custom-elements-v1/
Google Article on Shadow DOM: https://web.dev/shadowdom-v1/

5. Building More Complex Components

Code: stencil_code/complex-cmp-01

[[Web Components - More Complex]]

6. Stencil - An Introduction

Stencil: https://stenciljs.com/docs/getting-started

7. Stencil - Diving Into the Basics

Code: stencil_code/web-components-stencil

7.81. Using the Development Server

7.82. MUST READ: Ensuring Correct Imports

7.83. Creating a New Stencil Web Component

7.84. Styling a Stencil Component

7.85. Using Props

7.86. Important: Reflect Props to Attributes

7.87. Configuring Props

7.88. Using Slots & Styling

7.89. Rendering Conditional Content

7.90. Using Attributes for Styling only

7.91. Using Props in Combination with Attributes

7.92. Understanding Mutable Props

7.93. Preparing Tabs

7.94. Adding More Event Listeners

7.95. Using State

7.96. Adding Methods to Components

7.97. Adding a Backdrop

Working with host elements: https://stenciljs.com/docs/host-element