Wrapped Web Components (WWC)
Include it with CDN, you no longer need to setup a CI/CD pipeline just for a simple webapp.
Include it with CDN, you no longer need to setup a CI/CD pipeline just for a simple webapp.
Modern web development has become increasingly complex. Frameworks like React, Vue, and Angular offer powerful features but come with significant overhead - large bundle sizes, complex build systems, and steep learning curves.
While these frameworks excel for complex applications, they're often overkill for simpler projects or when you just need a few interactive components on a page. jQuery templates and other lightweight alternatives exist, but they often lack proper component encapsulation and can become difficult to manage as your project grows.
Wrapped Web Components bridges this gap by providing a lightweight solution (less than 5KB gzipped) that leverages the native Web Components standard. It eliminates the complexity of manually writing template.innerHTML and other low-level Web Component APIs while maintaining the benefits of component encapsulation and reusability.
With WWC, you can write components in plain HTML, CSS, and JavaScript - no special syntax to learn, no build steps required, and no framework lock-in. It's perfect for adding interactive components to existing sites or building lightweight applications without the framework overhead.
Use directly in your HTML without any build steps or compilation process.
Load directly from CDN or include the script file - no package manager required (though you can still use npm if you prefer).
Define components in separate HTML files with native syntax for better organization and maintainability.
Components are loaded on-demand, improving initial page load performance.
Intuitive lifecycle hooks: init, connected, disconnected, attributeChanged, and propertyChanged.
Uses Light DOM by default for better CSS integration, with option to enable Shadow DOM when encapsulation is needed.
npm install wrapped-web-componentsUMD Build (Global Variable):
<script src="https://unpkg.com/wrapped-web-components/dist/index.min.js"></script>
<script>
// The library is available as a global variable
const { define, html, css, register } = WebComponentWrapper;
</script>ES Module:
<script type="module">
import { define, html, css, register } from 'https://unpkg.com/wrapped-web-components/dist/index.esm.min.js';
</script>