The superfast way to custom elements.
## Name the HTML tags your own.
- Out-of-box custom elements (``)
```js
new Tag({
name: "myElement",
to: "p",
});
```
↓
```html
Hello
```
↓
```html
Hello
```
- Virtual Components (Like those of React)
- custom elements + Virtual components directly in HTML
```jsx
/** @jsx teddy.h */
import teddy from "teddytags";
class MyComponent extends teddy.Component {
constructor(props) {
super(props);
}
render() {
return Hello, {this.props.name}
;
}
}
```
- Bind virtual components to the DOM
```js
import { Tag } from "teddytags";
//MyComponent is defined in above example
new Tag({
name: "MyComponent",
to: MyComponent,
});
```
and use it.
```html
```
↓
```html
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`)**
```js
window.TagRegistry.getEntry("myComponent")
// => { from: class MyComponent..., nodes: Array }
```
# 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
```html
```
## NPM
```bash
> npm i teddytags
> yarn add teddytags
```
# Insights
[](http://npm.im/teddytags)
[](https://unpkg.com/teddytags)
[](https://unpkg.com/teddytags)
|
|