Define your Web component with Osagai using htm and Preact
You can get it on npm.
npm install htm-preact-osagaiOr import from unpkg
import {
define,
html
} from "https://unpkg.com/htm-preact-osagai/dist/htm-preact-osagai.mjs";<!DOCTYPE html>
<html lang="en">
<todo-list></todo-list>
<script type="module">
import {
define,
html,
Component
} from "https://unpkg.com/htm-preact-osagai/dist/htm-preact-osagai.mjs";
class App extends Component {
addTodo() {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
}
render({ page }, { todos = [] }) {
return html`
<div class="app">
<${Header} name="ToDo's (${page})" />
<ul>
${todos.map(
todo => html`
<li>${todo}</li>
`
)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
</div>
`;
}
}
const Header = ({ name }) =>
html`
<h1>${name} List</h1>
`;
function TodoList() {
return () =>
html`
<${App} page="All" />
`;
}
define("todo-list", TodoList);
</script>
</html>Define a new custom element
nameString Name for the new custom element. Note that custom element names must contain a hyphen (ex. hello-world)ComponentOsagaiComponent Function that will return a Template function that defines the layout of your custom element. ReferenceoptionsObject Configuration options from Osagai and custom elements. Reference
Template tag used to produce objects in the Preact format
stringsTemplateStringsArray
Returns TemplateResult
Component is a base class that you will usually subclass to create stateful Preact components. Preact API reference
Attach a shadow dom in the element. More at Osagai docs
Add a callback to be performed when the element is connected in the document. Osagai docs
elementOsagaiElement Instance of the osagai element.callbackFunction Function that will be perfomed when the element is connected.
Add a callback to be performed when the element is disconnected from the document. Osagai docs
elementOsagaiElement Instance of the osagai element.callbackFunction Function that will be perfomed when the element is disconnected.
Add a callback to be performed when one of the attribute from the observedAttributeslist is added, changed or removed. Osagai docs
elementOsagaiElement Instance of the osagai element.callbackFunction Function that will be runned with an object with the information of the attribute changed. (name, current, old)