Document Custom Elements tags being renamed
UserGalileo opened this issue · 2 comments
UserGalileo commented
Thanks for the great tool :)
I think it should be mentioned that in order to stop Custom Elements from initializing inside the island, a side-effect of this package is that their tags get renamed.
<is-land on:interaction>
<test-component></test-component>
</is-land>
Becomes:
<is-land on:interaction>
<is-land--test-component></is-land--test-component>
</is-land>
This could cause problems, styling comes to mind:
/* Element without Shadow DOM */
test-component h1 { ... }
This wouldn't work until the island is hydrated.
zachleat commented
Yeah! I did also want to call out #14 here which was just shipped in 3.0 today (which opts-out of the custom element rename but requires component code changes)
zachleat commented
I wrote up this blog post https://www.zachleat.com/web/defer-hydration/ and linked to it from the README!