@marvinhagemeister Do you have any ideas perhaps?

Woa, it's the prettiest bug repro we've received in any Preact repositories by a long shot! Love the animation effect 👍

Sounds like preact-custom-element needs the mentioned features to satisfy the described use case. Wrapping children automatically with a slot is one of those and the other is getting slot wrapping to work without shadow DOM.

I can't get property bindings to work at all as demonstrated in this PR. Attributes work fine, but properties doesn't end up as props on the Preact component (whether shadow DOM is used or not).

How does it show up in the linked sandbox? Whenever I click any of the buttons the number increases and the animation looks correct to me. - nvm, I see the issue now 👍

@mbohgard given our current org developments, what do you think of this issue now?

@marvinhagemeister Hah, thanks for the design compliments. This was used internally for a demonstration for higher ups. Had to be somewhat pretty to sell the idea ;)
Also thanks for the super fast work of getting property bindings to work! 👏

@wbern Yes the second part of this issue(s) is solved. There is still the issue that remains when having shadow DOM disabled (issue title updated). Personally, we can work around this, but maybe it should be mentioned in the docs what limitations there are while having shadow DOM disabled if there is no solution coming.

@mbohgard

Hey!

Do you mind to share a snippet of your workaround?

const foo: FunctionalComponent<any> = (props) => {
    return (
        <h1>My Heading</h1>
        <div class="SomeSpecialContaienrWithAriaStuff">{props.children}</div>
    )
}

// register as CustomElement
register(foo, "my-foo");

Serverside Rendered HTML:

<my-foo>
    <some-special-custom-element>
        Lorem doFoo
    </some-special-custom-element>
</my-foo>

The Result with those snippets is for me:

<my-foo>
        <h1>My Heading</h1>
        <div class="SomeSpecialContaienrWithAriaStuff"></div>
        <some-special-custom-element>
            Lorem doFoo
        </some-special-custom-element>
</my-foo>

Preferred Solution:

<my-foo>
        <h1>My Heading</h1>
        <div class="SomeSpecialContaienrWithAriaStuff">
             <some-special-custom-element>
                Lorem doFoo
             </some-special-custom-element>
         </div>
</my-foo>

If this is the atomic problem, please tell me i really would like to dig into this nice project!

I have the same issue. @paull39 (and other) do you have found a solution?

I found a solution, this package works well: https://github.com/jhukdev/preactement

For me this still does not work. If you change shadow to false in this example: https://codesandbox.io/s/preact-custom-element-rendering-content-issue-forked-38xpc?file=/src/index.js it stops working as expected.

I found a solution, this package works well: https://github.com/jhukdev/preactement

there is issue in this library, please check jahilldev/component-elements#26 it doesn't support nested custom-elements on DOM