It would be nice for server side renders sites (PHP/Twig, Express with templating) to be able to hydrate complex properties of a webcomponent without using javascript. Example:
In the above example, properties testing and complex should be set on ucdlib-my-cool-component when ucdlib-my-cool-component is first attached to the DOM assuming ucdlib-my-cool-component implements the SSRPropertiesController (see below).
General component spec:
The ucdlib-properties element should NEVER display, so display: none should be set.
The ucdlib-properties element itself doesn't do anything but store config data
A type property should set the format, eg yaml, json, etc. For v1 only JSON will be supported (and should be the default type parameter value), but want to leave options open.
A lit controller SSRPropertiesController should be created to hydrate an set the properties from the ucdlib-properties element to the parent: https://lit.dev/docs/composition/controllers/
The controller should only fire once, when the element is first attached
The controller should only check direct children elements for ucdlib-properties elements. We will allow for multiple, but order will matter.
Note. This is using connected as the fire event and not the constructor due to the parent constructor element possibly firing before children are registered.
It would be nice for server side renders sites (PHP/Twig, Express with templating) to be able to hydrate complex properties of a webcomponent without using javascript. Example:
In the above example, properties
testing
andcomplex
should be set onucdlib-my-cool-component
whenucdlib-my-cool-component
is first attached to the DOM assumingucdlib-my-cool-component
implements theSSRPropertiesController
(see below).General component spec:
ucdlib-properties
element should NEVER display, sodisplay: none
should be set.ucdlib-properties
element itself doesn't do anything but store config datatype
property should set the format, eg yaml, json, etc. For v1 only JSON will be supported (and should be the defaulttype
parameter value), but want to leave options open.SSRPropertiesController
should be created to hydrate an set the properties from theucdlib-properties
element to the parent: https://lit.dev/docs/composition/controllers/ucdlib-properties
elements. We will allow for multiple, but order will matter.Note. This is using
connected
as the fire event and not the constructor due to the parent constructor element possibly firing before children are registered.