The question was: "What's the best, if any, way to detect "conflicts" w/ CSS vars names between components?"
First, as a best-practice policy, on the elements team, we prefix custom properties with the element name, to make things clear: So paper-checkbox
would have something like --paper-checkbox-checked-color
etc.
Now, let's say that I have two identical elements, paper-checkbox
and paper-checkbox-copy
(in the sense that paper-checkbox-copy
has all of paper-checkbox
's custom variables, --paper-checkbox-checked-color
and friends). If you style individual elements separately, even if the names are duplicate, the custom properties are scoped correctly. So in the example above, this will always do the right thing (because, remember: custom properties are scoped to their elements, and down their tree, they're not globally set)
paper-checkbox {
/* all paper-checkboxes instances always be blue */
--paper-checkbox-unchecked-background-color: blue;
}