The idea is to allow local customization of the variables in producers.
An example use case would be:
adding a paper input on an blue toolbar
I'd like to make it's colors white so they look ok on the blue background
all while keeping the global paper-inputs colors unaltered.
Since there are already customization vars in the producer, I'd prefer not to write a ton of CSS all over again, but to reuse the existing producer with new, local, variables.
Sample API:
<!-- global params -->
<script>
CoreStyle.g.myColor = red;
</script>
<!-- parameterized producer -->
<core-style id="myProducer">
selector {
color: {{g.myColor}}; /* default to CoreStyle.params.myColor */
}
</core-style>
<!-- refined producer -->
<core-style refines="myProducer" select=".css-selector">
g.myColor = red; // local parameter just for this instance
</core-style>
The select=".css-selector" could be used to target a subset of elements that have a paired consumer, so it can be applied selectively.
If the select attribute would be missing the refinement would apply globally.
The idea is to allow local customization of the variables in producers.
An example use case would be:
Since there are already customization vars in the producer, I'd prefer not to write a ton of CSS all over again, but to reuse the existing producer with new, local, variables.
Sample API:
The
select=".css-selector"
could be used to target a subset of elements that have a paired consumer, so it can be applied selectively.If the
select
attribute would be missing the refinement would apply globally.