11ty/is-land

Document Custom Elements tags being renamed

UserGalileo opened this issue · 2 comments

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.

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)

I wrote up this blog post https://www.zachleat.com/web/defer-hydration/ and linked to it from the README!