Changing
value attribute does not change the element value. It is only used once, when the element is created.
It works for selected types.
and, i found anther issue, i set
round="false" on my custom-button, but render out to round
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
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: () => ...,
};
Hello, recently found out about Hybdrids -- kudos,this is an amazing approach! Very fond of the minimal and functional style it exhibits.
I am not really a front-end person so perhaps this question will sound silly but: why does html renders HTML template literals just fine when applied directly to a string, but renders HTML as plain text when the same string is passed from a property? Like when I do:
...
my_data: "<p>Hello Hybrids</p>"
render: ({ my_data }) => html `${my_data}`it renders my_data as a plain string, when I would expect it renders it just fine, as when:
...
render: ({ my_data }) => html `<p>Hello Hybrids</p>`?
Doh.
I don't get why multiple children are seen as just a single item (the first). The code below just prints "Getting contents for this id: summary".
import { children, define, html } from "hybrids";
const Tab = define({
tag: "my-tab",
id: "",
showId: ({ id }) => `Getting contents for this id: ${id}`,
})
define({
tag: "my-tabs",
tabs: children(Tab),
render: ({ tabs }) => html `${tabs.map(t => t.showId)}`
});<my-tabs>
<my-tab id="summary"></tab>
<my-tab id="tasks"></tab>
<my-tab id="payments"></tab>
<my-tab id="events"></tab>
</my-tabs>
I must be missing the obvious...
Sorry I guess it's another self-answered question: my browser was not rendering codesandbox properly. I hope my third question will repay for the time I made you lose reading :P
Another thing. If I define component B as a child of component A, is there a built-in method I can use to reference a property of A from inside the definition of B, for example in a computed property of B that would depend on the value of the A's property?
Adding the converse relation (
parent(A)) inside component B does not compile of course.
I'd like to avoid using document.getElementsByTagName...
:point_up: Edit: Another thing. If I define a property of A using children(B), is there a built-in method I can use to reference a property of A from inside the definition of B, for example in a computed property of B that would depend on the value of the A's property (not the same one, of course)?
:point_up: Edit: Using
parent(A) inside component B does not compile of course.
:point_up: Edit: Using
parent(A) inside component B does not work because it cannot be satisfied together with children(B) in A.
I am not sure what you mean that it does not compile. If you define your both A and B components inside of one ES module, everything will work. The parent and children should be used for building complex UI structures (like tabs from your example), so then the components are strictly related and they can be defined inside of one file. if you need pass some data from one component to another, I suggest to use store model.
10 replies
There are 2 issues, and I am not sure how to move forward.
- "An element with root router already connected to the document: \<my-app>" Probably trivial to solve, no idea though.
- The app's structure goes like:
<my-app>
<my-account></my-account>
<my-admin>
<my-checkout></my-checkout>
<my-tabs>
<my-tab id="summary"></my-tab>
<my-tab id="tasks"></my-tab>
<my-tab id="users"></my-tab>
<my-tab id="events"> </my-tab>
</my-tabs>
</my-admin>
</my-app>'my-account' and 'my-admin' are two routes, with a router allowing to switch from the one to the other. Works. However, for a reason I don't understand, the 'my-tab' elements appear to be written over / destroyed when switching to the route that hosts them (the 'my-admin' route).
Not sure how to fix this and to have the routes and the tabs under the second route work together.
Generally, you should not put your views inside by yourself. It is a router job to render current stack (view and optional dialogs) by putting the main router property into your template. It is best to think first what views your application needs. From your example above, I can see that you have "my-account" and "my-admin" pages, but the second has a multiple tabs - sections. Those you can implement in two ways. You can create a admin layout element, which has links to tabs and empty slot for the content, and create a saparate view for each tab, and use that element to highlight current section, so if you switch the view, the next view will re-render the container with correct section highlighted. Another way is to use nested router factory, and in "my-admin" view create this container thing, and put there nested views.
@smalluban: That's actually very kind of you thanks a lot!
I see you went with a nested router structure. That's cool. Is the structure I was trying to use hopeless for my purpose? I think I might be missing something fundamental in my understanding of Hybrids, because the structure I was going for seemed to be possible.
I see you went with a nested router structure. That's cool. Is the structure I was trying to use hopeless for my purpose? I think I might be missing something fundamental in my understanding of Hybrids, because the structure I was going for seemed to be possible.
2 replies
Thanks for the explanations!
I am glad that -- thanks to your generous help -- I was able to finish up migrating our in-house app to hybrids. Do you by any chance have resources on deploying hybrids in a webpack-powered project? If not I will see how I can glue this together and make a PR targeting the hybrids docs.
1 reply
Nevermind, I wasn't sure whether Hybrids could be
webpacked as is but it can no problem!
Hey @smalluban - any thoughts on supporting Hybrids in custom-elements-manifest with an analyzer plugin?
https://github.com/open-wc/custom-elements-manifest
I am advocating using Hybrids more broadly in my workplace but am fighting a slight uphill battle with the broad tooling ecosystem of other libraries.
Hi there! It would be great, but it won't be trival, even though the declarative nature of hybrids components might help. If you use TS, I think it is possible to declare the custom element name and connect the interface, so some plugins for VS Code reads them, and then in html templates they provide hints about props etc.
However, if you have some time, please create an issue in the repository, I will put it on my todo list ;)
However, if you have some time, please create an issue in the repository, I will put it on my todo list ;)