A lightweight and flexible boilerplate for creating custom Web Components using vanilla JavaScript. This project provides a structured foundation for building reusable, encapsulated components with Shadow DOM and scoped styles.
- Shadow DOM encapsulation for isolated component styling
- Modular architecture with separated style and logic files
- Support for all standard Web Component lifecycle methods
- Built-in attribute observation system
- No external dependencies or frameworks required
project-root/
├── src/
│ ├── components/
│ │ ├── component.style.js # Component-specific styles
│ │ └── component.js # Component logic and implementation
└── index.html # Usage example and demo page
- Modern web browser with Web Components support
- Basic understanding of JavaScript and DOM APIs
- Clone the repository:
git clone https://github.com/igor-ifrs/web-components.git
cd web-components- Start using the boilerplate by modifying the existing files according to your needs.
- Import your component in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebComponent Demo</title>
<script type="module" src="./src/components/component.js"></script>
</head>
<body>
<component-name data-attr="example"></component-name>
</body>
</html>- Define your component's logic:
import style from "./component.style.js";
export default class ComponentName extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.adoptedStyleSheets.push(style);
shadowRoot.innerHTML = "<slot></slot>";
}
// ... other methods
}
customElements.define('component-name', ComponentName);The boilerplate includes all standard Web Component lifecycle methods:
- connectedCallback(): Invoked when the component is added to the document's DOM
- disconnectedCallback(): Called when the component is removed from the DOM
- adoptedCallback(): Triggered when the component is moved to a new document
- attributeChangedCallback(name, oldValue, newValue): Executed when observed attributes change
Styles are managed in component.style.js using Constructable Stylesheets:
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
:host {
display: block;
/* Your default styles here */
}
`);
export default sheet;Define observed attributes in your component class:
static get observedAttributes() {
return ["data-attr"];
}- Always use Shadow DOM for style encapsulation
- Keep styles and logic in separate files for better maintainability
- Use meaningful component and attribute names
- Implement error handling for attribute changes
- Document your component's API and usage
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Web Components specifications and standards
- Modern web browsers' native component support
For more information about Web Components, visit MDN Web Components Guide.