hybridsjs/hybrids

Web components from plain objects and pure functions!

Dominik Lubański

@smalluban

Just define it, the hybrids will do the rest ;)

const CustomButton = {
  disabled: false,
  render: ({ disabled }) => html`
    <button disabled="${disabled}">...</button>
  `,
};

i18u

@iahu

it not work for me

i18u

@iahu

https://codesandbox.io/s/observe-attribute-demo-qufng?file=/index.html

Dominik Lubański

@smalluban

https://codesandbox.io/s/custom-button-in-hybrids-qt6xh?file=/src/index.js

i18u

@iahu

open developer tool panel, add a disabled attribute to the custom-button

Dominik Lubański

@smalluban

oh, this is what you meant :) Read this: https://hybrids.js.org/#/core-features/property?id=attribute-fallback

This is a arch design decision, the attribute is used only for static values. If you want to dynamically change the value, use property.

It works the same as <input> value (in the way from attr to property)

i18u

@iahu

you mean, {disabled: property(false)} ?

Dominik Lubański

@smalluban

You are using property() by defining: { disabled: false }

I mean property of the element instance, like el.disabled = !el.disabled

i18u

@iahu

property() api not work

Dominik Lubański

@smalluban

Look at the example, which I put above

i18u

@iahu

thank you

Dominik Lubański

@smalluban

I encourage you to read docs from the top, as at first, the design patterns might be confusing as they are totally different than most other UI libraries.

i18u

@iahu

i cant find you example code

Dominik Lubański

@smalluban

https://codesandbox.io/s/custom-button-in-hybrids-qt6xh?file=/src/index.js

i18u

@iahu

not the same thing

Dominik Lubański

@smalluban

Look at the line 8 in index.js

i18u

@iahu

Dominik Lubański

@smalluban

We are using there just the DOM api to find all of the buttons, and set b.disabled to the opposite value.

Which then propagates to the internal <button>

i18u

@iahu

how about use setAttribute api?

Dominik Lubański

@smalluban

Don't ;)

Attributes are supported for static HTML, for example if you produce your document on the server, you can use custom elements built with hybrids.

But there is no sence in using setAttribute which always produces string, as you have properties API.

It also have a huge impact on observing changes (internally by the library)

i18u

@iahu

em, it is a design of web components or hybirds?

Dominik Lubański

@smalluban

It is a design choice of the hybrids

And it follows behavior of some of the built-in elements, as I wrote about <input>

Changing value attribute does not change the element value. It is only used once, when the element is created.

i18u

@iahu

ok, i got your concept

Dominik Lubański

@smalluban

However, especially for the styling purposes, lately I introduced back sync with the attribute when you change property value, so you can create selectors like this safely: :host([disabled]) {}

It works for selected types.

i18u

@iahu

so, all custom-element attributes are map to element-element properties, and can only accessed by property index way, right ?

and, i found anther issue, i set round="false" on my custom-button, but render out to round

Dominik Lubański

@smalluban

You should follow boolean type of attributes in HTML5

false -> no attribute, true -> any value

Inside of the template you can pass false or true, as it is controlled by the engine, and it removes or set attribute if needed.

It's everything explained in the docs, please read property factory section, especially here: https://hybrids.js.org/#/core-features/property?id=booleans

And here for the template engine: https://hybrids.js.org/#/template-engine/properties-and-attributes

i18u

@iahu

ok, thanks, i just follow your doc to learning

Dominik Lubański

@smalluban

i18u

@iahu

hi @smalluban, i found that HTML autofocus attribute seems not work

i18u

@iahu

and there is no way to set focus in render scope.

if (autofocus) {
    host.querySelector('button')?.focus({ preventScroll: true }) // button is null
}

Dominik Lubański

@smalluban

It works (at least on Chrome) - https://qt6xh.csb.app/ - I've changed codesandbox used before (https://codesandbox.io/s/custom-button-in-hybrids-qt6xh?file=/index.html)

when it's a static value... The dynamic value passed from the parent (custom-button) will not work, as it must be set when a button is created, but the template engine will set that value after that.

However, you can do it programmatically, as you wanted, but in a little bit different way:

const CustomButton = {
  autofocus: {
    ...property(false),
    observe(host, value) {
      if (value) {
        const button = host.render().querySelector("button");
        button.focus();
       }
    },
  },
  render: () => ...,
};

Dominik Lubański

@smalluban

By default render factory uses Shadow DOM, so your host.querySelector() can't find a button (it is not a children of custom-button element).

Where communities thrive

People

Repo info

Activity