Define your Web component with Osagai using htm and Preact
You can get it on npm.
npm install htm-preact-osagai
Or 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
-
name
String Name for the new custom element. Note that custom element names must contain a hyphen (ex. hello-world) -
Component
OsagaiComponent Function that will return a Template function that defines the layout of your custom element. Reference -
options
Object Configuration options from Osagai and custom elements. Reference
Template tag used to produce objects in the Preact format
-
strings
TemplateStringsArray
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
-
element
OsagaiElement Instance of the osagai element. -
callback
Function 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
-
element
OsagaiElement Instance of the osagai element. -
callback
Function 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
-
element
OsagaiElement Instance of the osagai element. -
callback
Function Function that will be runned with an object with the information of the attribute changed. (name, current, old)