Non-unique component selector


  • Full report name: Non-unique component selector
  • Status: DEBUG
  • Related to: components
  • Summary: Warhol had to guess to identity a component
  • How to fix: double-check if Warhol guessed correctly

This is a notice that Warhol issues when it has to guess to identify a component. It is not a problem by itself but may point to the cause of other, more confusing errors.

Every component in component configuration has a canonical target selector, but ambiguities are still possible. Let's say there's two components in your projects, .foo and .foo-extra, which are implemented as follows:

<div class="foo"></div>
<div class="foo foo-extra"></div>

The second element might be either an instance of .foo or .foo-extra, and according to how CSS selectors work, it is sort of both at the same time. But Warhol needs to make a definitive judgment call and will use its heuristics to identify the second element as an instance of .foo-extra. But because this is just a heuristic and not really how CSS selectors are supposed work, Warhol will inform you every time when it has to resort to heuristics.

You can ignore this notice as long as Warhol keeps guessing correctly. To get rid of it, update your component selectors to be unambiguous (e.g. define .foo-extra as .foo.foo-extra).

See also #

  • Hybrid component, the error you will see when Warhol's heuristics for component identification fail