10 replies

1. Doug Parker 🕸️ 15 hr later

   @zachleat I actually made a (very lazy) fork of `is-land` for similar reasons.

   https://github.com/dgp1130/Hydrator/blob/b266eaf4c269a28e365c46aa075819f42621c1b5/src/examples/is-land/is-land.ts
   https://github.com/dgp1130/Hydrator/blob/b266eaf4c269a28e365c46aa075819f42621c1b5/src/examples/deference.html#L49-L71

   You mentioned the question of "how to handle two instances of the same component?", have you considered `defer-hydration` support?

   https://github.com/webcomponents-cg/community-protocols/pull/15

   I found that worked pretty well for my use case, but I'm not sure if there's a place for that in the official library. I was planning to make an issue about it but hadn't gotten around to it.

   1. Zach Leatherman 16 hr later

      @develwithoutacause oooh—I would love to see `defer-hydration` support! That sounds like exactly what is needed to solve this in a much better way

      1. Zach Leatherman 16 hr later

         @develwithoutacause (subscribed and upvoted)

         I don’t think it will do much until it’s natively available in the platform though right?

         1. Zach Leatherman 17 hr later

            @develwithoutacause well, wait—I think I understand what you mean. If component libraries have implemented this (and it seems like Lit has?)—I can add support for `defer-hydration` today and it will work in those libraries

            1. Doug Parker 🕸️ 17 hr later

               @zachleat Yeah, it's a "community protocol", so any component / component library can implement it, there's nothing browsers *need* to support.

               My own library in that repo respects `defer-hydration`, so `is-land` just needs to remove the attribute from any child nodes, which I think is a reasonable thing for it to do?

               1. Doug Parker 🕸️ 17 hr later

                  @zachleat Not sure what the default behavior should be, but maybe don't replace the tag name if the node has `defer-hydration`? If it has that attribute then you have a pretty good reason to believe it won't do anything until the attribute is removed by `is-land`.

                  1. Zach Leatherman 17 hr later

                     @develwithoutacause yeah! I love that! I would also like to see it as a supported feature in the platform too 😅

                     1. Doug Parker 🕸️ 18 hr later

                        @zachleat Me too, though TBH I'm not sure what it would really look like as a supported feature. Maybe an attribute which tells the browser "don't upgrade components in this subtree"?

                        1. Zach Leatherman 18 hr later

                           @develwithoutacause yeah I think it could even be simpler: don’t upgrade this specific element

                           1. Doug Parker 🕸️ 18 hr later

                              @zachleat That's basically what `defer-hydration` does, it just requires the component to implement that behavior (which isn't great I admit).

                              I do feel like when it only applies to a specific element, it requires you to put `defer-hydration` on everything except the top-level node, which is easy to mess up. It's also implementable in userspace via `attributeChangedCallback()` like `defer-hydration` does, whereas a subtree approach can't be.