feat: Hydration Logic

[splitinfinities]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The web components community group has a community protocol establishes a common interface for logical hydration that may, in many circumstances, be a boon to customers to have as a part of Stencil's Component decorator.

See webcomponents-cg/community-protocols#15 (review) for my perspective on this protocol.

In terms of the feature itself, we don't have any type of hydration logic with the exception of how our lazy loading works - when a Custom Element is in DOM, load the JS for it. That discounts all the browser work that may happen across all components of that loaded type within the browser. Implementing a lever for people where we can hydrate components if they're within the viewport, updated manually in some way, or can be overridden to the default behavior may be a boon to developers.

This may also ask for an "implicit height" concept as well, which would allow for the component author to state that a component should take up some amount of space prior to being Hydrated.

Describe the Use Case

Imagine a virtual scroll list with placeholder elements is a fantastic use case. Other use cases can be plainly "anything that exists within the viewport should be hydrated, and defer hydration of the other items until X". Other "logical" ideas should be considered as well, maybe a "hydrate after browser becomes idle", for example.

Describe Preferred Solution

Ideally, expanding @component to have two new properties, sampled here:

@Component({
  tag: "example-component",
  style: "style.css",
  hydration: {
    // Can be "eager" (default), "defer", "lazy", maybe "idle"?
    type: "lazy",
    
    // Optional. Authors should be able to write
    // this "prehydrated" support as a work around. 
    // Allow for a string so any unit could be used
    // by an author. 
    intrinsicHeight: "2rem" 
  }
})

This is helpful because Stencil already has a "hydrated" signal - so component authors and consumers can style pre-hydrated elements by targeting any of:

example-component {
    /** General rule of thumb with containment is to begin with a strict containment model and loosen up as your component's requirements expand.  **/
    contain: strict; 
    content-visibility: hidden;
}

example-component:not(.hydrated) { 
    /** This is where the intrinsic sizing is set. Once hydrated, the component authors CSS can take over.  **/
    contain-intrinsic-size: 2rem;
}

example-component.hydrated { 
    /** idk if this would be necessary per spec, might be **/
    contain-intrinsic-size: initial;
}

Describe Alternatives

No response

Related Code

No response

Additional Information

No response