5.2.0 B1 - Component > Customize Inheritance

Beta
#1

How is Component > Customize inheritance intended to work?

Creating a Headline element with or without Parameters and setting the following:

Headline > Customize > Class = component-class
Headline > Customize > Element CSS = $el {color: #f00;}
Headline > Customize > Custom Attributes = data-component : component-value

Label Headline as My-Headline and Export Component checking Allow Customization.

On page use My-Headline Component and set the following:

My-Headline > Customize > Class = my-headline-class
My-Headline > Customize > Element CSS = $el {border: none;}
My-Headline > Customize > Custom Attributes = data-my-headline : my-headline-value

Save page and inspect on frontend.

The elements properties are only that the original Headline Component, none of the additional customizations to the My-Headline element on the page are applied.

#2

I’ll take a look at this. Might be something off with how the values are getting composed together. Here’s the expected behavior.

  • All Customization properties from the source Component will apply
  • If a custom ID is set, it will prefer a value from the Component instance and fallback to the source
  • If custom classes are set, they will be concatenated together
  • Custom attributes will be merged together. The instance attributes will override source attributes if they are specified on both.
  • Element CSS will concatenate, with the source being first.

So the theme overall would be 1. Use anything available from the source. 2. Any customization from the instance will apply incrementally, and only replace things that can only exist once (attributes like ID and custom atts)

#3

Thanks @alexander, it’s kind of behaviour I expected but wasn’t sure.

Is the same is true of Component inheritance? For example a Private Component with customizations, which is the source for an Element Component with further customizations finally when this Element Component is used on a Page/Layout with more customizations. As Components can continue to inherit, would there be a limit to depth of customizations inheritance?

#4

Yes, in theory it should just keep merging in the attributes as long as each component is configured with “allow customize” turned on.

#5

This is still in issue in beta 2. Hasn’t been fully resolved.

#6

Just tested Beta4, confirmed working as expected.

#7

Thank you!