Is there an easy way to use code instead of templates? Like this subtemplate
const tableRows = function (d) {
return html`
${d.map(function (row) {
return html`<tr>
${row.map(function ({ id, day, date, visible,selected }) {
return html` <td>
${visible && html`<t-day id="${id}" day=${day} selected=${selected}></t-day>`}
</td>`;
})}
</tr>`;
})}
`;
};The code above is called by a parent template with this line in it, where d is a promise returned by a library used to access indexeddb.
${html.resolve(d.then((res) => tableRows(res)))}I use lit highlighting in VS-coode, but still I had to try and fail a bit before getting it to work :-). Full source here: https://github.com/tovare/days
const Model = {
id: true,
day: "",
date: "",
visible: false,
selected: false,
[store.connect]: {
list: () => yourIndexDBPromiseApi(id),
},
};
const MyElement = {
models: store([Model]),
render: ({ models}) => html`
${store.ready(models) && tableRows(models)}
`,
}
import { html, property } from 'hybrids';
const parseJSON = (value = []) => typeof value === 'string' ? JSON.parse(value) : value;
const nextImage = (host) => {
host.current = host.current + 1 > host.content.length - 1 ? 0 : host.current + 1;
};
const inlineStyles = `
.figure {
object-fit: cover;
width: 100%;
height: 100%;
}
.ui-slideshow {
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transition: opacity ease-out 0.3s;
}
.show {
opacity: 1;
z-index: 10;
}
.hide {
opacity: 0;
z-index: 9;
}
`;
export const slider = {
content: property(parseJSON),
timeout: 5000,
current: {
get: (_, lastValue) => lastValue || 0,
set: (_, value) => value || 0,
observe: (host) => {
setTimeout(nextImage, host.timeout, host);
},
},
render: ({ content, current }) => html`
<div class="ui-slideshow">
${content.map(({ src }, index) => html`
<div class="slide ${current === index ? 'show' : 'hide'}">
<figure>
<img class="figure" src="${src}">
</figure>
</div>
`.style(inlineStyles))}
</div>
`,
};Hi @Paker30! I have to say that your solution looks clever :) However, the observe method is called as an effect of property change, so it won't change timeout delay when host.timeout changes. It's worth thinking about where that side effect fits best. In this case, it is related to timeout and sets current property. Because of that, I would create an interval, which uses the timeout property and sets the current value.
const slider = {
...,
timeout: 5000,
interval: {
get: (host, lastValue) => {
if (lastValue) clearInterval(lastValue);
return setInterval(nextImage, host.timeout, host);
},
connect: (host, key): {
return () => host[key] && clearInterval(host[key]);
},
observe() {},
},
render: ...,
};As you can see above example also clears the interval when leaving the DOM. As everything in the library is lazy, the interval property is not required by render method, so without an empty observe method, it's get method won't be called.
It is also a good candidate for a factory. Instead of setting directly interval method, the above property could be closed in the function like intervalFactory(fn, timeoutKey) like this
const slider =
timeout: 5000,
interval: intervalFactory(nextImage, “timeout”),
current:...,
...,
};
1 reply
@smalluban In #145, you helped me come up with a way to add a .style('@import "custom.css"'), and while that mechanism is working fine, I'm noticing some FOUC from the browser when rendering the child element. I assume this is more of a Web Components/browser issue, but I was wondering if you had any pointers.
I can see from the Network devtools tab that, when the child is rendered, all the CSS is re-retrieved, and I'm wondering if that's part of the problem. (I thought it was odd that the parent custom element didn't require a network request, but it's included in the html file.) So to summarize I have:
<!-- No FOUC, single network retrieval of CSS -->
. . .
<link href="custom.css" rel="stylesheet" />
. . .
<my-parent></my-parent>const myParent = {
showChild: false,
render: ({ showChild }) => html`
${showChild && <my-child></my-child>}
`.style('@import "custom.css"')
}
// When child is shown, I see FOUC and an additional uncached request of all the CSS
const myChild = {
render: () => html`
. . .
`.style('@import "custom.css"')
}Any ideas?
{ shadowRoot: false } a shot. It looks like slot functionality is lost is that case, but I'm wondering if there are any workarounds to achieve nested/transcluded templates with without ShadowDOM? Maybe through some manual query selectors or something? I'd like achieve what React.children basically provides, e.g.:<my-parent>
<div class="custom-stuff-here">
. . .
</div>
</my-parent>@import statement was deprecated. I think it might be related to your problem. Generally, it's better to write styles in place, and only those, which are used by the current element (I suppose, that your custom.css has styles for all your elements). Mentioned constructed stylesheets were created for better performance, so they will work even better than your way (as you still include style tag to each instance of the element). It will be easier to help you if you build a live code - you can use codesandbox examples from the docs to get started with it.
@import statement by using <link rel="stylesheet" href="custom.css"> in the template (however, it is not supported by the ShadyCSS polyfill).