Web Components & Design System with StencilJS

StencilJS compiles to standard web components, delivering framework-agnostic, developer-friendly tooling with TypeScript, JavaScript, and CSS; it boosts productivity by reducing boilerplate and enabling tests, docs, and cross-framework usage.

Compare the custom elements API with a Stencil component to highlight declarative JSX, simple props, and style URL that reduce boilerplate and lifecycle management.

Install node and initialize a stencil ui project with npm init stencil, then build and test web components using npm scripts, jest, and playwright in a monorepo with turborepo.

Initialize turborepo to structure a root with apps and packages, including React sandbox and Angular sandbox. Configure core and React libraries and workspaces for fast builds.

Explore framework integration with stencil output targets to turn raw web components into ready-to-use React, Vue, and Angular libraries, handling typings, autocompletion, and SSR.

Learn how npm link creates a local symlink between a globally linked package and a local project, enabling immediate testing of local libraries without publishing.

Set up a React library using the Stencil react output target, install TypeScript types, configure tsconfig and exports, and build core and React libraries with Turborepo for local testing.

Create a consumer React sandbox to test the web components library, install dependencies, link the React library, and run the Vite dev server to render and use the component.

Learn how to set the core library as the first build in a turbo monorepo by editing the root json to declare core as a dependency, ensuring it builds first.

Set up the Vue library inside the monorepo and configure tsconfig and package.json. Install dependencies, add the Vue output target to the core library, and link the packages.

Initialize a Vue sandbox app in the apps folder, enable TypeScript TSX support and router, then install Vue and link the view library.

Install the Angular CLI globally, create the Angular sandbox, and run the app; link the core library as web components and define custom elements.

Create a vanilla JavaScript sandbox to build and preview web components, run a dev server, load the core library via localhost, and use a CDN for production.

Explore Stencil's components API, including decorators, state and prop, public methods, and events, while mastering lifecycle hooks and shadow dom to render interactive web components.

learn to create a UI typography component with stenciljs, using npm generate, dash tags, a variant prop and host for styling, plus unit test and instrument test and docs.

Discover how the shadow DOM provides DOM and style encapsulation, creating a shadow root to isolate a component’s internal DOM from the host and slotted content, and offering scoped CSS.

Configure global styles in the StencilJS design system using sass and a global CSS file with CSS variables, enabling design tokens and consistent typography across components.

Create an icon component that renders Google material symbols via a name prop, and align its size with UI tokens for a consistent design system integration.

Build a logo component usingStencilJS by adding an assets folder and the stencil logo asset, then render it with width and height props.

Create a per-component preview by adding a dedicated page for each component under source/pages, and link to UI logo, typography, and icon pages within the web components design system.

Build a reusable StencilJS button component with primary, secondary, and tertiary variants and a disabled state, using tokens for spacing, borders, radii, and colors.

Learn how shadow dom blocks material symbol styles in icon components inside buttons, and refactor to use inline svg icons with a centralized icons file, ensuring consistent sizing and styling.

Create two components, Zstack and UI stack, to enable horizontal and vertical stacking via flexbox with a consistent gap. Use these wrappers to group elements, improving readability and design-system consistency.

Develop a robust tooltip in a StencilJS design system by using the popover API and floating UI to keep it on top, position accurately, and adapt to scrolling and overflow.

Develop a data-driven menu component using a popover and floating UI, with a trigger button and context menu tests, handling item clicks and an open prop, while ensuring accessibility.

Learn to build a reusable menu component with a backdrop, close events, and context menu support by emitting a close event, reflecting state, and positioning at mouse coordinates.

Style the menu with a borderless popover, constrain height and width, and apply padding, radius, and shadows for a polished look while ensuring hover and focus interactions enhance accessibility.

Learn to build a sidebar component with open and closed states, manage items with label and icon, and toggle interactions for a dashboard using StencilJS design system.

Build a modal component with the HTML dialog element in a web components design system using StencilJS, including header, content slot, footer, and programmatic open/close via public methods.

Explore modal components in a web components framework, using slots and named slots to render header, content, and footer, with shadow DOM considerations and keyboard accessibility like escape to close.

Discover how the form associated API lets StencilJS components participate in HTML forms, linking name and value to the parent form for native validation and accessible shadow DOM.

Explore building form components by creating a reusable input and label, testing on a shared user interface form page, and addressing shadow dom, accessibility, and label-input connections.

Style form components in a StencilJS design system by customizing input and label, including colors, borders, placeholders, focus, error states, and disabled or read-only modes, with a flex column layout.

Build and test a textarea component aligned with the input, wiring props such as field id, name, placeholder, min and max length, and rows.

Develop a native browser select component in the web components and design system with StencilJS, using input styles, minimal props, and standard form integration for accessibility.

Build a fieldset component and UI fieldset option (radio or checkbox) with a legend, integrate into the form, and style via CSS, noting shadow dom is not used.

Build a tabbed ui with a tab context, tab list, and panels; manage active value from url or stage and handle changes with aria attributes and a data context id.

Explore building accessible tab components in the StencilJS design system by implementing UI tab context, tab list, tabs, and panels, with unique context IDs, mutation observers, and keyboard-friendly, aria-compliant navigation.

Builds a tab panel component in StencilJS, wiring a tab panel with ARIA attributes, context awareness, and hidden visibility, and styles tabs for active, hover, and focus states.

Learn how frameworks like React, Angular, and Vue consume web components, compare render props challenges, and adopt a data-driven, config-driven approach with slots for predictable, serializable components.

Develop a config-driven UI table component with StencilJS, rendering headers and data-driven rows, supporting typography, buttons, links, selects, and inputs, and controlling styling with max width, max height, and overflow.

Configure a stenciljs table component with maximum width and height, overflow, and a sticky header; style the host with design tokens for a responsive ui table.

Explore how accessibility uses WCAG to make sites usable for everyone, including 1.3 billion people, with screen readers, keyboard navigation, ADA and UK/EU acts, and better SEO.

Explore how to test accessibility in web components using the Storybook accessibility addon and Playwright for end-to-end tests. Use Chrome Lighthouse and keyboard-only testing to strengthen your design system's accessibility.

Semantic HTML is already accessible; start with semantic markup to support screen readers and keyboard navigation. Use proper labels and native buttons, avoid divs for interactivity in stencil design systems.

Enable auto documentation by documenting every prop and event with jsdoc to generate json and readme outputs for storybook.

Set up storybook for a web components design system using StencilJS, installing storybook, configuring web components, adding docs addon, and aligning build scripts to run before development.

Create and configure a typography story in a web components design system using Storybook, including meta, render logic, and MDX documentation for component previews.

Explore how to build comprehensive Storybook documentation and blocks for typography and icons, using StencilJS and React components to showcase variants and props.

Learn to add the storybook accessibility addon and run accessibility tests, including visual impairments like blurred vision, grayscale, and achromatopsia, with component violations and simple configuration.

Set up global styles for storybook preview by linking core library css and Geist and Aria fonts, copy static directories, and ensure fonts load for visuals in development and production.

Learn how to write stories for composite components in storybook, like tabs and fieldsets, handle props and HTML structure, and organize readme docs for clear, accessible documentation.

Master unit testing for web components with the Stencil test runner and Jest, using templates and a new spec page to test DOM changes, aria associations, and component instances.

Explore end-to-end testing with Playwright in a StencilJS project, including adapter setup, instrument tests, and UI mode, while noting experimental visual regression features.

Install x Playwright and write accessibility tests to inspect pages with Playwright, then configure wcag tag checks, suppress landmark and region warnings, and export scan results.

Learn how to implement visual regression testing with Playwright in a StencilJS design system, using snapshot images, HTML reporters, and visual diffs to compare baselines and new UI changes.

Understand when to use server-side rendering with stencil SSR, comparing universal versus runtime approaches, and explore SEO, performance, and maintenance trade-offs.

Decide to use server-side rendering with stencil js for seo-critical or static pages; otherwise use client-side rendering, and avoid ssr for components reliant on browser APIs.

Discover three SSR options in StencilJS—from avoiding SSR for pure web components, to partial SSR for headers and footers, to full SSR for content-heavy sites requiring SEO.

Start small and test server-side rendering with non-critical components like typography, button, and input; optimize performance with scoped mode, avoid large props, and simplify consumer integration by abstracting complexity.

We weigh server-side rendering versus client-side rendering for web components, considering dynamic components, bandwidth, maintenance, and seo, defaulting to client-side rendering, with Next.js offering flexibility.

deploy and demo a cross-framework design system using StencilJS, showcasing an interactive dashboard with a table, tabs, and form, plus dark mode, local dev server setup, and multi-framework consumption.

Publish core, React, and Vue libraries to npm with login, version bumps, and npm publish, while unlinking local packages and testing across Angular, vanilla JavaScript, Vue, and React.