HTMC is a lightweight library for creating reusable web components using a simple HTML-like syntax. It provides a straightforward way to define, import, and use custom components with support for deferred and lazy loading.
- Reusable Components: Define custom components with attributes and inner content.
- Dynamic Imports: Import component definitions from external files.
- Deferred and Lazy Loading: Improve performance by loading components as needed.
- Encapsulation: Use Shadow DOM to encapsulate styles and behavior.
Include the HTMC script in your HTML file:
<script src="https://raw.githubusercontent.com/YagilItzhak/HTMC/main/index.js" defer></script>Define custom components using the <component> tag within a <htmc-define> tag. Specify attributes that the component can accept. Use ${} syntax to denote placeholders for attribute values and <slot></slot> to insert inner content dynamically.
<htmc-define>
<component name="my-button" attributes="onclick">
<button onclick="${onclick}"><slot></slot></button>
</component>
<component name="my-input" attributes="placeholder maxlength">
<input type="text" placeholder="${placeholder}" maxlength="${maxlength}">
</component>
</htmc-define>-
${}Syntax: Use${attributeName}within your component's HTML to denote a placeholder for the attribute value. When the component is used, these placeholders will be replaced with the actual attribute values. -
<slot></slot>: Slots are used to insert inner content provided by the user of the component. This allows for flexible content insertion, making the components more reusable and versatile.
Use the defined components in your HTML. Set attributes and inner content as needed.
<my-button onclick="alert('Button clicked!')">Click Me!</my-button>
<my-input placeholder="Enter text" maxlength="10"></my-input>Import external component definitions using the <htmc-attach> tag.
<htmc-attach src="path/to/components.htmc"></htmc-attach>You can defer or lazy load the components to improve performance:
- Defer: Load components after the main content has loaded.
- Lazy: Load components only when they are in the viewport.
<htmc-attach src="path/to/components.htmc" defer></htmc-attach>
<htmc-attach src="path/to/components.htmc" lazy></htmc-attach><htmc-define>
<component name="my-button" attributes="onclick">
<button onclick="${onclick}"><slot></slot></button>
</component>
<component name="my-input" attributes="placeholder maxlength">
<input type="text" placeholder="${placeholder}" maxlength="${maxlength}">
</component>
</htmc-define><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reusable Web Components with HTMC</title>
<script src="path/to/htmc.js" defer></script>
</head>
<body>
<htmc-attach src="components.htmc"></htmc-attach>
<my-button onclick="alert('Button clicked!')">Click Me!</my-button>
<my-input placeholder="Enter text" maxlength="10"></my-input>
</body>
</html><htmc-define>
<component name="my-greeting" attributes="name">
<div>
<h1>Hello, ${name}!</h1>
<button id="changeNameButton">Change Name</button>
</div>
</component>
</htmc-define><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMC Example</title>
<script type="module" src="dist/index.js"></script>
</head>
<body>
<htmc-attach src="my-component.htmc"></htmc-attach>
<!-- Using the custom component -->
<my-greeting name="World"></my-greeting>
<script>
customElements.whenDefined('my-greeting').then(() => {
const greetingComponent = document.querySelector('my-greeting');
const shadowRoot = greetingComponent.shadowRoot;
const changeNameButton = shadowRoot.getElementById('changeNameButton');
changeNameButton.addEventListener('click', () => {
greetingComponent.setAttribute('name', 'HTMC');
});
});
</script>
</body>
</html>HTMX allows you to add AJAX requests and other interactive elements to your HTML. You can use HTMX with HTMC components to create dynamic, server-driven interactions.
<my-button hx-get="/endpoint" hx-target="#result">Load Data</my-button>
<div id="result"></div>Tailwind CSS is a utility-first CSS framework that can be used to style your HTMC components. Add Tailwind classes directly to the elements within your component definitions.
<htmc-define>
<component name="my-button" attributes="onclick">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="${onclick}"><slot></slot></button>
</component>
</htmc-define>Defines a set of custom components.
None.
Defines a single custom component within a <htmc-define>.
-
name: The name of the custom component. -
attributes: A space-separated list of attributes that the component accepts.
Imports external component definitions.
-
src: The URL of the external component definitions file. -
defer: (Optional) Defer loading until after the main content has loaded. -
lazy: (Optional) Lazy load the component when it enters the viewport.
This library is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.