value
attribute does not change the element value. It is only used once, when the element is created.
round="false"
on my custom-button, but render out to round
const CustomButton = {
autofocus: {
...property(false),
observe(host, value) {
if (value) {
const button = host.render().querySelector("button");
button.focus();
}
},
},
render: () => ...,
};
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>`
?
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>
parent(A)
) inside component B does not compile of course.
parent(A)
inside component B does not compile of course.
parent(A)
inside component B does not work because it cannot be satisfied together with children(B)
in A.
There are 2 issues, and I am not sure how to move forward.
<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).
webpack
ed 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.