Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 11 15:10
    smalluban closed #181
  • Nov 10 17:10
    rschooley opened #181
  • Nov 10 10:41
    smalluban labeled #180
  • Nov 10 10:41
    smalluban labeled #180
  • Nov 10 04:56
    rschooley opened #180
  • Sep 22 07:53
    smalluban closed #179
  • Sep 22 07:13
    smalluban synchronize #179
  • Sep 17 08:02
    smalluban synchronize #179
  • Sep 16 06:23
    smalluban edited #179
  • Sep 16 06:22
    smalluban opened #179
  • Sep 10 11:54
    AngeloKreienbuehl closed #178
  • Sep 10 07:47
    smalluban labeled #178
  • Sep 10 07:47
    smalluban labeled #178
  • Sep 10 07:42
    AngeloKreienbuehl opened #178
  • Sep 08 08:29
    smalluban closed #136
  • Sep 08 08:28
    smalluban edited #136
  • Sep 08 08:28
    smalluban ready_for_review #136
  • Sep 08 08:27
    smalluban synchronize #136
  • Sep 08 08:25
    smalluban synchronize #136
  • Sep 08 08:23
    smalluban synchronize #136
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
open developer tool panel, add a disabled attribute to the custom-button
Dominik Lubański
@smalluban
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
oh
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
i18u
@iahu
not the same thing
Dominik Lubański
@smalluban
Look at the line 8 in index.js
i18u
@iahu
no
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
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).