@bootstrapp/view
Advanced tools
Web components framework built on Custom Elements API with lit-html templating
Web components framework built on Custom Elements API with lit-html templating.
npm install @bootstrapp/view
Use importmaps to load directly from esm.sh:
<script type="importmap">
{
"imports": {
"lit-html": "https://esm.sh/lit-html",
"@bootstrapp/types": "https://esm.sh/@bootstrapp/types@0.1.0",
"@bootstrapp/view": "https://esm.sh/@bootstrapp/view@0.1.0"
}
}
</script>
@bootstrapp/view is a lightweight, reactive web components framework that extends the Custom Elements API. It provides a familiar component model with reactive properties, lifecycle hooks, and efficient templating via lit-html.
Here's a complete example showing how to create and use a component with importmaps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Counter - Bootstrapp Example</title>
<script type="importmap">
{
"imports": {
"lit-html": "https://esm.sh/lit-html",
"@bootstrapp/types": "https://esm.sh/@bootstrapp/types@0.1.0",
"@bootstrapp/view": "https://esm.sh/@bootstrapp/view@0.1.0"
}
}
</script>
<script type="module">
import View from '@bootstrapp/view';
import { html } from 'lit';
import T from '@bootstrapp/types';
View.define('my-counter', {
properties: {
count: T.number({ defaultValue: 0 }),
label: T.string({ defaultValue: 'Counter' })
},
increment() {
this.count++;
},
render() {
return html`
<div>
<h2>${this.label}</h2>
<p>Count: ${this.count}</p>
<button @click=${this.increment}>Increment</button>
</div>
`;
}
});
</script>
</head>
<body>
<h1>Bootstrapp Counter Example</h1>
<!-- Using the component -->
<my-counter label="Click Counter"></my-counter>
<my-counter count="5" label="Started at 5"></my-counter>
</body>
</html>
connected, disconnected, willUpdate, firstUpdated, updatedon(), off(), emit() methods for eventsextends propertyView.define('my-component', {
properties: {}, // Property definitions with types
shadow: true, // Enable shadow DOM (optional)
css: '/* styles */', // Component-scoped CSS (requires shadow: true)
formAssociated: false, // Form-associated custom element
// Lifecycle hooks
connected() {},
disconnected() {},
willUpdate(changedProps) {},
firstUpdated(changedProps) {},
updated(changedProps) {},
// Custom methods
render() {
return html`...`;
}
});
The View API provides a simple way to define and register components:
import View from '@bootstrapp/view';
// Define components
View.define('my-component', {
properties: {},
render() {
return html`...`;
}
});
// Advanced: Get a component class programmatically
const MyComponent = await View.get('my-component');
AGPL-3.0
FAQs
Web components framework built on Custom Elements API with lit-html templating
We found that @bootstrapp/view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.