English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 8.5 Hours | 3.81 GB
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Let’s face it: You got thousands of HTML tags to choose from but some really helpful ones (, , , …) are missing.
What if you could build your own HTML tags?
Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called “Web Components” (or “custom HTML elements”).
Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you’ll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.
Such custom elements don’t replace Angular, React or Vue though – instead you can easily use them in ANY web project, including projects using such frameworks and libraries.
In this course, you’ll learn this from scratch.
But we won’t stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don’t know that? No worries, you’ll learn it in the course!).
In detail, in this course you will learn:
- how to build re-usable, lightweight custom HTML elements with native browser features
- how to build web components of all complexities – from a simple tooltip to modals or side drawers
- how to pass data into your own web components and use it there
- how to emit your own custom events which you can listen to in JavaScript
- how to use the Shadow DOM to scope your CSS styles to your custom elements
- how to use Stencil.js to get a much easier development workflow
- how to use the many features Stencil.js provides to build native web components way more efficiently
- how to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)
Table of Contents
Introduction
1 Introduction
2 Web Components – A Quick Demo
3 What are Web Components
4 Why Do We Use Web Components
5 Comparing Web Components & Frameworks
6 Course Outline
7 How To Get The Most Out Of The Course
Refreshing Next Generation JavaScript (Optional)
8 Module Introduction
9 Next-Gen JavaScript – Summary
10 JS Array Functions
11 Understanding let and const
12 Working with Arrow Functions
13 Exports and Imports
14 Understanding Classes
15 Classes, Properties and Methods
16 The Spread & Rest Operator
17 Refreshing Array Functions
18 Understanding Async Code
Understanding the Basics
19 Module Introduction – What are Web Components
20 Attributes vs Properties
21 Styling our Elements
22 Using the Shadow DOM
23 Adding an HTML Template
24 Using Slots
25 Defining the Template in JavaScript
26 Using Style Tags in the Shadow DOM
27 Extending Built-In Elements
28 Debugging
29 Browser Support
30 Wrap Up
31 Useful Resources & Links
32 Our Development Setup
33 Creating our First Custom Element
34 Interacting with the Surrounding DOM
35 Understanding the Custom Elements Lifecycle
36 Using connectedcallback for DOM Access
37 Listening to Events Inside the Component
38 Using Attributes on Custom Elements
Diving Deeper Into Web Components
39 Module Introduction
40 Cleaning Up Our Overall Styling
41 Observing Attribute Changes
42 Adjusting the Component Behaviour Upon Attribute Changes
43 Using disconnectedcallback
44 Adding a Render Method
45 Wrap Up
46 Useful Resources & Links
47 Understanding Shadow DOM Projection
48 Styling slot Content Outside of the Shadow DOM
49 Styling slot Content Inside the Shadow DOM
50 Styling the Host Component
51 Styling Components from Outside
52 Conditional Host Styling
53 Styling with the Host Content in Mind
54 Smart Dynamic Styling with CSS Variables
Building More Complex Components
55 Module Introduction
56 Closing the Modal with Modal Buttons
57 Dispatching Custom Events
58 Configuring Custom Events
59 Adding Enhancements & Modal Animations
60 Wrap Up
61 Useful Resources & Links
62 Creating the Basics Modal Component
63 Adding the Modal Container
64 Styling the Modal Elements
65 Adding Some General App Logic
66 Opening the Modal via CSS
67 Public Methods & Properties
68 Understanding Named Slots
69 slotchange & Getting Access to Slot Content
Stencil – An Introduction
70 Module Introduction
71 Using Web Components in Modern Browsers
72 Browser Support for Web Components
73 Using Web Components in All Browsers
74 Creating a Stencil Project
75 What is Stencil
76 Stencil.js behind the Scenes
77 Diving Into a First Stencil Component
78 Wrap Up
Stencil – Diving Into the Basics
79 Module Introduction
80 Using Props in Combination with Attributes
81 Understanding Mutable Props
82 Preparing Tabs
83 Adding More Event Listeners
84 Using State
85 Adding Methods to Components
86 Adding a Backdrop
87 Wrap Up
88 Useful Resources & Links
89 Using the Development Server
90 Creating a New Stencil Web Component
91 Styling a Stencil Component
92 Using Props
93 Configuring Props
94 Using Slots & Styling
95 Rendering Conditional Content
96 Using Attributes for Styling only
Advanced Stencil
97 Module Introdution
98 Two Way Binding & Input Validation
99 Error Handling
100 Using the componentdidload Lifecycle Hook
101 All Lifecycle Hooks
102 Using Update Lifecycle Hooks
103 Watching Prop Changes
104 Creating a New Component
105 Styling the New Component
106 Outputting a List of Elements
107 Styling the List Items
108 Creating a New Component
109 Emitting Customs Events
110 Using the Listen Decorator
111 Using Hostdata
112 Adding a Loading Spinner
113 Embedding Components Into Components
114 Using CSS Properties
115 Using Stencil.js to Build Entire Apps
116 Wrap Up
117 Useful Resources & Links
118 Component & API Preparations
119 Submitting Forms
120 Styling the Component
121 HTTP Requests in Components
122 Using the API Key
123 Accessing the Host Element
124 Using References
Deployment & Publishing
125 Module Introduction
126 Polyfills & The Internet Explorer
127 IE & Polyfills
128 Wrap Up
129 Useful Resources & Links
130 Using Stencil Config
131 Building & Using the Components
132 Using Web Components in a Node.js Project
133 Publishing to NPM
134 Installing NPM Packages
135 Using Web Components in an Angular App
136 Using Web Components in a React App
137 Using Web Components in a Vue App
Roundup
138 Roundup
139 Useful Resources & Links
Resolve the captcha to access the links!