Reflective properties and cloning elements

[ErikOnBike]

Many Shoelace elements have 'reflective' properties, properties which have both a (JavaScript) property value and are also represented as an attribute on the HTML element. Not all properties are reflective. Some can't be reflective (you can't store an HTML element itself inside an attribute value). What is the exact 'rule' for letting a property be a reflective one?

There are some inconsistencies. For example the Button's disabled property is reflective, but the Dropdown's disabled property is not.

The reason I'd like properties to be reflective is the possibility to clone them. Cloning (see https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) copies any Node and its attributes, but it will not copy properties. Currently cloning an Icon will not copy its name and/or library properties, because they are not reflective. It will copy its attributes, but these might have changed. See example below.

It is in this example of course possible to set the attributes, instead of the properties. I prefer setting properties, but that does not work for all components. This results in having to use properties in some cases and attributes in others.

Example:
Consider an Icon is created using HTML. The Icon's name property is then changed by JavaScript code. The attribute still shows the 'original' attribute value.

<sl-icon id="example" name="square"></sl-icon>
<script>
const icon = document.getElementById("example");

// Change icon through property
icon.name = "check-square";
// Icon has visually changed

// But attribute still shows 'original' value
icon.getAttribute("name"); // "square" instead of "check-square"

[claviska]

What is the exact 'rule' for letting a property be a reflective one?

There's no rule, but I generally try to follow a couple simple guidelines:

• If the attribute is useful to target via CSS (e.g. disabled, checked, variant) than it should be reflected
• If the attribute contains contains an object/array, it does not reflect (e.g. with JSON.stringify) because it's probably has little value being in the DOM and updating large sets is expensive

The reason I'd like properties to be reflective is the possibility to clone them. Cloning (see https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) copies any Node and its attributes, but it will not copy properties. Currently cloning an Icon will not copy its name and/or library properties, because they are not reflective. It will copy its attributes, but these might have changed.

This depends on how you've created them and whether or not properties have updated since then. In the majority of cases, attributes do not change on their own. If you set <sl-icon name="something"> then you can expect that name to persist. An exception is when dialog/drawer/etc. has an open attribute and you call el.hide() or the user dismisses the element. In that case, the open attribute is removed automatically (but all of those should be reflective already).

I'll admit the line is a bit gray, but I don't believe an element should reflect all its properties by default. Even if you did this with scalar data, you couldn't do it with non-scalar without the use of converters or without littering the DOM with potentially expensive operations (think of a data table with a large array of rows).

If you want to clone an element, you should probably iterate the properties you're interested in to make sure they're in sync. Better yet, why not create the element from scratch so you don't have to be concerned with its current state? That guarantees the element is how you intend it to be.

Regarding the icon example, the case could be made for reflecting name under the first guideline: it's possible one might want to target an icon depending on which icon is being rendered. The same goes for library, so I'd be open to reflecting both of those. However, label isn't likely to be useful so it shouldn't reflect.

[ErikOnBike]

Thx Cory. Good to know there is no hard rule.

To explain cloning:
I use cloning for generic drag/drop capabilities in which I want to show a 'cloned' variant of the element being dragged. Therefore cloning is a useful feature in my framework. I have added some 'clone' behaviour to Shoelace components now for the properties which do not reflect.

Just to be sure: No need to change/add anything for the icon. ;-)

[claviska]

There was a PR in #742 that added them. I also updated dropdown since not reflecting disabled was unintentional.