I've used vanilla web components without a framework for years and I love it. The only issue I had when learning web components was that the [guide](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) encourages the use of the imperative API which may result in cumbersome code in terms of readability.

Another way would be to use template literals to define html structures declaratively, but there are limits to what kind of data plain attributes can take in. Well, there are some frameworks solving this issue with extensive templating engines, but the engines and frameworks in general are just unpleasant for me for various reasons. All I wanted was the simplicity and type-safety of the imperative API, but in a declarative form similar to React. Therefore I started building prop APIs for my components, which map the props to appropriate properties of the element, with full type-safety.

    // so I got from this
    const icon = document.createElement('span');
    icon.className = 'Icon';
    icon.tabIndex = 0;
    // to this (inherited from HTMLSpanElement)
    const icon = new Span({
      className: 'icon',
      tabIndex: 0,
    });

This allowed me to build complex templates with complex data types, without framework lock-in, preserving the vanilla nature of my components. I believe this approach is the missing piece of web components and would solve most of the problems some disappointed developers faced with web components so far.

# Introducing HTML Props

So I created this library called `html-props`, a mixin which allows you to define props for web components with ease. The props can be reflected to attributes and it uses signals for property updates. However the library is agnostic to update strategies, so it expects you to optimize the updates yourself, unless you want to rerender the whole component.

I also added a set of Flutter inspired layout components so you can get into layoutting right away with zero CSS. Here's a simple example app.

    import { HTMLPropsMixin, prop } from '@html-props/core';
    import { Div } from '@html-props/built-ins';
    import { Column, Container } from '@html-props/layout';
    
    class CounterButton extends HTMLPropsMixin(HTMLButtonElement, {
      is: prop('counter-button', { attribute: true }),
      style: {
        backgroundColor: '#a78bfa',
        color: '#13111c',
        border: 'none',
        padding: '0.5rem 1rem',
        borderRadius: '0.25rem',
        cursor: 'pointer',
        fontWeight: '600',
      },
    }) {}
    
    class CounterApp extends HTMLPropsMixin(HTMLElement, {
      count: prop(0),
    }) {
      render() {
        return new Container({
          padding: '2rem',
          content: new Column({
            crossAxisAlignment: 'center',
            gap: '1rem',
            content: [
              new Div({
                textContent: `Count is: ${this.count}`,
                style: { fontSize: '1.2rem' },
              }),
              new CounterButton({
                textContent: 'Increment',
                onclick: () => this.count++,
              }),
            ],
          }),
        });
      }
    }
    
    CounterButton.define('counter-button', { extends: 'button' });
    CounterApp.define('counter-app');

The library is now in beta, so I'm looking for external feedback. Go ahead and visit the website, read some docs, maybe write a todo app and hit me with an issue in Github if you suspect a bug or a missing use case. ✌️

* [https://html-props.dev/](https://html-props.dev/)
* [https://github.com/atzufuki/html-props](https://github.com/atzufuki/html-props)

Props for Web Components