Reflect property

[hatealgebra]

Dear Atomico team,

first of all, thanks for the awesome library and work that you have put in.

My question is about reflect property, would you be able to elaborate more on it? As described in the docs:

Prop.reflect
If the "reflect" property is set to true, its value is reflected as an attribute of the web component, >this is useful for the declaration of CSS states, for example:

component.props = { checked: { type: Boolean, reflect: true, }, };

Would you mind giving me some examples, of when the usage of reflect prop is necessary? Also, I'm willing to contribute the acquired info to the official docs.

As I said I'm not quite sure of the usage and more info would be welcome.

Thank you very much!

[UpperCod]

Hi @hatealgebra , thank you for asking. When defining a property with the configuration reflect: true, it will exist as an attribute as long as its type allows serialization.

Not all properties require the use of the "reflect" configuration, as its application focuses more on utilizing specific attribute features, such as:

1. Applying style selectors based on attributes.
2. Using querySelector to reference a component or retrieve its value from an attribute.

Applying style selectors based on attributes.

Example:

myComponent.props = {
	show: {
		type: Boolean,
		reflect: true
	}
}

myComponent.styles = css`
	:host {
		display: none;
	}

	/**
	 * The use of the :host([show]) selector is only possible thanks to reflect. 
	 * With this technique, we can work with states within static CSS.
	*/
	:host([show]) {
		display: block;
	}

This is also useful when using host-context, as we can reference the parent based on an attribute instead of a tagName.

Using querySelector to reference a component or retrieve its value from an attribute

Atomico relies on the use of properties, but there are other libraries or vanilla components that only support the use of attributes. If your component needs to communicate directly with components that follow that condition, it is advisable to use "reflect".

---

There is another point that I almost forgot to mention, using reflect you can also define the slot property with a default value.

tabChild.props = {slot: { type: String, reflect: true, value: "tab" }}

This allows your component, when mounted in the document, to already have a slot attribute with a tab value.

---

I'm willing to contribute the acquired info to the official docs.

I will be happy to receive your contribution to the documentation