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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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 web components andStencil.js by building projects, exporting dist output, and publishing to npm, with integration in Angular, React, and Vue apps.