The superfast way to custom elements.
Name the HTML tags your own.
- Out-of-box custom elements (
<myElement />
)
name: "myElement" to: "p";
↓
Hello
↓
Hello
- Virtual Components (Like those of React)
- custom elements + Virtual components directly in HTML
/** @jsx teddy.h */import teddy from "teddytags";Component { ; } { return <h1>Hello thispropsname</h1>; }
- Bind virtual components to the DOM
;//MyComponent is defined in above example name: "MyComponent" to: MyComponent;
and use it.
↓
Hello, myself
- Superb and extra-simple diff algorithm
- Stateful Class Components
- 3kB min-zipped in browser
- TypeScript and TSX support built-in
- Custom Elements Registry (
window.TagRegistry
)windowTagRegistry// => { from: class MyComponent..., nodes: Array<HTMLElement> }
Why does the project exist in the first place??
Because custom elements need to be much more powerful than they are now. So a little library like this can make a difference.
Documentation
Head over to https://teddy.js.org/docs
Try it out
Browser
You don't need ES6 to run TeddyTags... https://git.io/teddytags-es5
<!-- UMD --><!-- ESM -->
NPM
> npm i teddytags> yarn add teddytags