is the renderProps pattern possible with polymer's lit-element? - polymer

Question

There is a very useful pattern in react called the renderProps pattern (https://reactjs.org/docs/render-props.html) but I'm not sure if this is possible with lit-elements, due to the way the shadow dom isolates the css (meaning any css defined on the renderProp won't be carried into the shadow dom of the component with the renderProp).
Has anyone found a way around this, or a different pattern that enables the same use case as the renderProps pattern ?
Thanks !
EDIT: Here is an example that might make it clearer. Let's imagine a hover-menu component whose job is to display a menu on hover. This menu might need to know the position of the element hovered. And we obviously want to be able to render whatever we want inside it.
So we would like to be able to do something like that (renderMenuContent is a renderProp).
<hover-menu
.renderMenuContent="${(boundingClientRect) =>
html`<div>my menu content which could be positioned using ${JSON.stringify(boundingClientRect)}</div>`
}"
></hover-menu>

Answer 1

Turns out there is indeed no such easy solution as in React, again due to the isolation of the shadow dom.
The best solution is to create a component and use it in the renderProp (this way it can manage its own css classes).
In our example:
<hover-menu
.renderMenuContent="${(boundingClientRect) =>
html`<my-menu-content .boundingClientRect="${boundingClientRect}"></my-menu-content>`
}"
></hover-menu>
class MyMenuContent extends LitElement {
static get properties() {
return { boundingClientRect: { type: Object } };
}
static get styles() {
return css`.my-container { color: red }`;
}
render() {
return html`<div class="my-container">
can be positioned using ${JSON.stringify(this.boundingClientRect)}
</div>`;
}
}