Juicy-tile-list does not work with text nodes; what to do about it
Closed this issue · 8 comments
It happened to me more than once that I was trying to render such template in juicy-tile-list:
<template>
Hello World
</template>
As an app developer I would totally expect this to work. It doesn't work with juicy-tile-list, because only element nodes are rendered. Text nodes are ignored.
This works as expected:
<template>
<div>Hello World</div>
</template>
I propose to either:
- wrap text nodes in Shadow DOM (hard)
- show
console.errorfor any non-empty text node injuicy-tile-listroot (easy)
- Iterating over child text nodes should not be that hard. Distribution of content for separated nodes would be a big one, as we cannot select them with CSS selectors. If WICG/webcomponents#60 get solved, we could think about distributing text nodes programmatically.
- Seems to be the only way to go, as we do not want to wrpa them in light DOM.
@miyconst Could you implement point 2.? Expected error message is:
juicy-tile-list can only render DOM element nodes. Provided input contains a text node which cannot be rendered. Wrap it in a
<div>to fix the problem. Problematic text node: "Hello World" (/path/to/html.html)
Okay.
According to W3C CSS Grid Layout spec:
each child of a grid container becomes a grid item, and each contiguous run of text that is directly contained inside a grid container is wrapped in an anonymous grid item.
Therefore Extreme Clean Solution would be to wrap it into a tile.
But probably we should wait for Imperative distribution API
Still not doable in position: absolute or Flexbox, so very far from working in a fallback.
Why it's not? I believe wrapping doability does not depend on CSS Grid, but on ShadowDOM.
Ok, agreed, but in CSS Grid it works without Shadow DOM and we want to minimize the need for runtime processing.
Native functionality will not fit our needs, as we will have no element to apply layout setup to.