> Markdown version of [/videos/313-frameworkless-how-to-use-web-components-in-production](https://www.wearedevelopers.com/videos/313-frameworkless-how-to-use-web-components-in-production). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Frameworkless: How to use Web-Components in production?

Are you tired of painful framework migrations and ecosystem churn? Discover how native web components deliver lightning-fast, production-ready applications without the technical debt.

- **Speakers:** [Tobias Münch](https://www.wearedevelopers.com/@tobias-munch)
- **Event:** JavaScript Congress
- **Published:** November 25, 2021
- **Duration:** 46:39
- **URL:** https://www.wearedevelopers.com/videos/313-frameworkless-how-to-use-web-components-in-production

## Summary

Overreliance on complex npm dependency trees and JavaScript frameworks often introduces security vulnerabilities and severe technical debt, such as painful migration paths between major framework versions. Frameworkless frontend development using native web components offers a standardized alternative that bypasses these third-party risks. By building directly on browser APIs, engineering teams can significantly reduce overhead, avoid ecosystem churn, and achieve lightning-fast rendering times that outpace traditional virtual DOM environments.

Mastering native web components requires deep familiarity with core web standards: the shadow DOM for strict CSS and markup encapsulation, the custom elements registry for defining bespoke HTML tags, and templates with slots for flexible content projection. Developers must manually orchestrate the component lifecycle—utilizing methods like `connectedCallback` for initialization and `attributeChangedCallback` for reactive updates. Without a framework to handle state automatically, teams must implement deliberate rendering strategies, balancing explicit DOM manipulation with efficient localized state updates to prevent performance bottlenecks.

Scaling frameworkless applications for production demands disciplined architecture, frequently leveraging domain-driven design to isolate components, data models, and backend repositories. While the initial developer experience is slower and requires writing custom boilerplate for event dispatching and native data binding, the resulting bundles are exceptionally lightweight. For organizations prioritizing faster iteration, lightweight toolchains like stencil js or slim js provide a practical compromise, offering modern developer comfort while still compiling down to highly portable, standard-compliant web components.

**Keywords:** frameworkless frontend development, native web components, shadow dom encapsulation, custom elements registry, vanilla js performance, frontend technical debt, web component lifecycle, html templates and slots, domain-driven frontend architecture, dom manipulation strategies, npm dependency vulnerabilities, stencil js, slim js, legacy web application migration, native data binding

## Chapters

1. **Motivation for adopting frameworkless web components** (00:02) — How avoiding large dependency trees and adopting vanilla JavaScript can reduce bloat and improve app security.
1. **Core browser standards supporting custom web components** (03:14) — Managing encapsulation and content distribution through the shadow DOM, the custom elements registry, and HTML templates.
1. **Web component lifecycle callbacks and rendering strategies** (07:52) — Handling DOM insertion and UI updates using standard lifecycle callbacks and localized rendering techniques.
1. **Passing complex data objects to web components** (12:22) — How to transmit structured data directly as component properties to avoid execution overhead from stringification.
1. **Architectural lessons and legacy application migration strategies** (13:58) — Structuring domain-driven designs and gradually enhancing legacy applications with custom element wrappers for long-term maintainability.
1. **Live coding an editable web component list application** (20:14) — Building a frameworkless interactive list featuring edit states, custom event dispatching, and shadow DOM styling.
1. **Evaluating trade-offs between vanilla components and lightweight frameworks** (37:01) — Balancing the long-term code maintainability of plain web standards against the immediate productivity boosts of slim compilers.
1. **Question and answer session on compatibility and framework comparisons** (38:56) — Clarifying legacy browser support, CDN deployment strategies, and the business considerations for choosing standards over major frameworks.

## Related Moments

- [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Audience questions on accessibility and framework tradeoffs](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [The role of web components in modern web development](https://www.wearedevelopers.com/videos/1265-keith-cirkle-of-github-on-react-fatigue) (from "Keith Cirkle of GitHub on React Fatigue")
- [Addressing developer questions on framework capabilities and architectural alternatives](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Implementing microfrontends entirely with custom elements](https://www.wearedevelopers.com/videos/873-interface-contracts-in-microfrontend-architectures) (from "Interface Contracts in Microfrontend Architectures")
- [Understanding standard technologies behind web component architecture](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) (from "Accessibility with Web Components")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)

## Related Jobs

- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Staff Frontend Software Engineer](https://www.wearedevelopers.com/jobs/48370-staff-frontend-software-engineer) at **Bitdrift**
- [Senior Product Engineer](https://www.wearedevelopers.com/jobs/48544-senior-product-engineer) at **Blacksmith Software**
- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [Senior Design Engineer](https://www.wearedevelopers.com/jobs/ext/2644934-senior-design-engineer) at **GitHub**