Web Components & Stencil.js - Build Custom HTML Elements

Refresh your knowledge of es6+ JavaScript features, including arrow functions, let and const, and array methods. See how we use modern JavaScript in this course, with a touch of TypeScript.

Discover let and const as modern JavaScript variables, replacing var and clarifying scope, with const used for values that never change and live jsbin examples.

Master modular javascript with exports and imports, using default and named exports, aliasing, and star imports, preparing code for browser compatibility.

learn the next generation JavaScript class syntax for web components, initializing properties directly in class, and defining methods as arrow functions to simplify this handling, with ES6 Babel.

Explore how the spread and rest operators, the three dots, copy arrays and objects, merge new properties, and collect function arguments into an array for processing.

Learn how array functions like map transform a numbers array into a doubleNum array by applying an arrow function to each element and returning the result.

Create your web component by defining a tooltip class that extends the HTML element, register it with customElements.define using a dash-separated tag name, and implement constructor logic with super.

Build and integrate custom web components by composing built-in HTML elements and tooltips, while understanding the lifecycle of custom elements as the browser renders them.

Style a web component by applying absolute positioning to the tooltip, making the host relative, adding a z-index, and using Shadow DOM and templates to prevent global style interference.

Attach an open shadow root to a custom component to isolate its DOM from the light DOM and render content through the shadow tree.

Define a reusable web component by embedding the template in the JavaScript file, using shadow root innerHTML and template literals for a multi-line HTML string, preparing content for DOM mounting.

Learn how to define styles inside a web component's shadow DOM using style tags within the template or innerHTML, producing scoped CSS that does not affect the main DOM.

Master the basics of web components, including two creation approaches—extending a generic HTML element or a specific one like anchor—and the use of a constructor, shadow DOM, slots, and connectedCallback.

Explore how shadow DOM projection works with slots, showing how web components render light DOM content in the shadow DOM without moving the DOM node, clarified via Chrome DevTools.

Learn how to conditionally style web components with host selectors inStencil.js, using :host with conditions to apply a default background only when the custom element has the important class.

Apply host-context styling to custom elements with the host-context selector and its function form in parentheses to specify surrounding conditions like a paragraph, enabling bold font weight when inside.

Implement attributeChangedCallback in your tooltip web component to respond to text attribute changes; declare observedAttributes and log the attribute name, old value, and new value.

In this lecture, use disconnectedCallback to clean up event listeners when a web component is removed, and store a class property like _tooltipIcon to manage cleanup.

Introduce a central render method to manage DOM updates in a web component. Use tooltipVisible to toggle the tooltipContainer in the shadow DOM via showTooltip and hideTooltip.

Wrap up the module by moving styling to the host selector and reinforce concepts like host, host with condition, slotted selectors, and css variables for themes.

Learn to build a custom uc-modal web component using shadow DOM, with a backdrop and modal panel, defined in modal.js and used in index.html.

Position the modal above the backdrop inside the shadow DOM with fixed placement, a higher z-index, top 15vh, left 25%, width 50%, a white background, and a drop shadow.

Expose a public open method on the modal component to show it from outside. A public isOpen property reflects state and enables external control for safe, single openings.

Explore using named slots in web components with stencil.js, including naming slots, targeting content with slot attributes, and styling slotted content via the slotted selector.

Explore how to deploy your custom HTML elements, preview stencil.js as a helpful tool for building web components, and anticipate publishing libraries to npm later in the course.

Install NodeJS and npm to enable stencil, then initialize a new stencil project to build web components and run a development server with an index.html demo.

Introduces stencil.js workflow, showing how to author a tsx component in TypeScript with a render function and JSX, and build it to a dist web component that auto-updates the DOM.

Summarizes stencil advantages for building native web components with automatic polyfill loading, out-of-the-box browser compatibility, and an easier, condensed syntax that becomes clearer as you learn.

Start a development server with npm start to preview components in memory, auto-reloading on changes and serving index.html at localhost:3333, while dist output remains unused.

Build a stencil web component named side drawer with side-drawer.tsx, using @component, a uc-side-drawer tag, and a render method returning jsx.

Explore slots in web components with stencil.js, including named slots, and learn to style slotted content from the light dom while configuring a side drawer header.

Learn how props combine with attributes in Stencil.js to control a side drawer, syncing the open property to the open attribute and reflecting changes for programmatic control via a button.

Add an x button to the side drawer and wire onCloseDrawer to close it, noting that props are immutable by default and can be mutable with reflect to attribute.

Expose public methods in stencil web components by applying the method decorator, enabling outside calls to open a side drawer via the opened property and the public API.

Wrap up stencil fundamentals by highlighting decorators, declarative templates, and dynamic rendering that auto-updates props and state. See how external methods and JSX-driven conditional content enable clean web components.

Explore advanced features of stencil.js, including the lifecycle of stencil components, emitting and listening to custom events, and writing more reactive components that adapt to changing circumstances.

Register for a free Alphavantage API key to fetch stock data. Render a symbol input and a price output, and handle form submit to fetch the latest price.

Implement a form submission in a stock price component by wiring an onFetchStockPrice method to the form's submit event, preventing default behavior and displaying 'submitted' before styling and API hookup.

Fetch stock data in stencil components using the fetch API, handle promises with then and catch, parse JSON, update state with the global quote price, and ensure correct this context.

Create a new stock finder component in stencil.js, wire a search form to fetch stock symbols from alphavantage, and prepare to render results in the dom.

Reuse form styling from another component by applying the host selector, creating cohesive visuals, and set up shared styles before adding logic to display results below the input and button.

Emit a custom event when a list item is clicked using a Stencil.js event emitter named ucSymbolSelected, with a string symbol payload.

Learn to use the host data method in stencil to add a conditional error class on the host element when the input is invalid, enabling dynamic border color styling.

Create a reusable spinner web component withStencil.js, styling via spinner.css, and embed it into the stock finder component's loading state, using ucSpinner as a custom HTML element in TSX/JSX.

Apply CSS properties and custom CSS variables to style web components from outside the shadow DOM. Use tokens like color-primary, color-primary inverse, and color-primary highlight to unify the look.

Explore how to deploy, publish, and share web components across projects, and learn how to generate native web components and integrate them into different projects using stencil.js.

Configure stencil with a namespace and output targets, and apply bundles for automatic code splitting; learn how stencil loads only the required components, like spinner with stock price or finder.

Build and bundle web components with Stencil.js by running npm run build to generate dist files, then deploy and use them in web pages or React, Vue, or Angular projects.

Learn how to use web components in a React app by importing uc-components, registering custom elements, and rendering with lowercase tags like us-stock-price, while exploring lazy loading and code splitting.

Learn to integrate Stencil web components in a Vue app by installing and loading uc-components, defining custom elements, and enabling lazy loading with dynamic bundles in development.

Explore stencil.js web components across browsers with conditional polyfills, noting Edge and Internet Explorer 11 limitations, and patch shadow DOM and CSS variables via a custom polyfill in index.html.

Explore web components andStencil.js by building projects, exporting dist output, and publishing to npm, with integration in Angular, React, and Vue apps.

Encourage learners to apply what they learned in day-to-day projects by building demo projects, reinforcing the course foundation, and pursuing more courses to deepen proficiency.