[question]: how does it work without slots?

[sorvell]

Describe the bug

Won't this fail if react updates the content of the button?

function Elena() {
  const [count, setCount] = useState(0);
  return (
    <elena-button variant="primary" onClick={() => {
      setCount((count) => count + 1)
    }}>
      {count}
    </elena-button>
  );
}

Affected area

Core library

How to reproduce

see example in issue

Configuration file (if applicable)

No response

Codepen link

No response

Logs

System Info

all

Before submitting

• I’ve searched for existing issues
• I’ve checked the documentation
• I’ve tried the latest version of Elena

[arielsalminen]

@sorvell Please see #9 since this is a duplicate of that issue.

Also related: #10

I’ve somewhat documented this behavior in the “known issues” section, but need to add better docs to perhaps the component libraries and FAQ sections to make it more discoverable: https://elenajs.com/advanced/gotchas#javascript-frameworks

There’re also examples of how to achieve what you’re describing with Elena when you want to use Light DOM + no slots (basically a Primitive Component):

• Next.js example: https://github.com/getelena/next-example-project/blob/main/src/app/variant-cycler.tsx#L25-L27
• I guess the official example page is doing what you’re describing as well (although it uses Vue), but instead of replacing the inner DOM structure after initial render, it sets the content via the built-in text prop on next renders: https://elenajs.com/examples/#dynamic-components

Hope this helps! ☺️

[sorvell]

I think I understand the approach and perspective here and I want to be supportive. Here is my view.

I think (?) this example demonstrates the issue and workaround.

I think your text property is a reasonable start but I think it would need to be clearly documented and extended to support DOM nodes in addition to just strings. This is a basic renderProps pattern and there are some ideas in the slottable-request event that could apply (note, it doesn't conceptually need Shadow DOM).

[arielsalminen]

@sorvell Thanks for the suggestions! I’ll ponder this and see how the library should evolve further in the future. Will also build a couple prototypes around these ideas.

Honestly though, if the functionality described is a show stopper for someone, I would recommend using Declarative Shadow DOM or even just Shadow DOM (both of which Elena already supports), instead of trying to render things into Light DOM.

And yeah, I agree that it needs anyway better docs as well…

[sorvell]

That is very reasonable. I think it's not so much that it's a show stopper as a hidden cliff. When one falls of it they struggle to find the right ledge on which to find footing.

I use <elena-button> in React:

• <elana-button>static content just works
• <elana-button>{count} ... broken (hidden cliff). ... ah, but you can text property (ledge)
• <elana-button>text={<my-icon>arrow</my-icon> travel} ... broken (hidden cliff), ... etc.

To avoid this, I'd love to see DSD put forth first and have the library try to provide help with any gaps in styling and/or a11y via a small amount of JS. This feels like a better option than stuff like render props aka the text property.

[arielsalminen]

@sorvell I created a proof-of-concept that solves the exact problem you described originally: #26

…but still want to explore next how it would look like to support bigger structural changes as well.