[color-swatch] Fix popovers with color details in <color-chart>s

[DmitrySharabin]

Now it works not only in Chrome, but also in Safari and Firefox. Support for popover is much wider than support for style queries. For example, Firefox still lacks them.

Open the link in Safari/Firefox for preview: https://deploy-preview-202--color-elements.netlify.app/src/color-chart/

@LeaVerou, could you please take another look at this PR? It turned out that it solves issues not only in Safari.

[netlify]

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	ea4d6f2
🔍 Latest deploy log	https://app.netlify.com/projects/color-elements/deploys/688b47aa3ca4160008f9b6a9
😎 Deploy Preview	https://deploy-preview-202--color-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[LeaVerou]

Safari supports style queries, why wasn't it working in Safari?

[DmitrySharabin]

Safari supports style queries, why wasn't it working in Safari?

I still don't have an answer to this question. I can't reproduce the issue. In simple cases, everything works as expected. However, in our case, we have a hierarchy of custom elements: some are within a component's light DOM, while others are in the shadow DOM. And since we rely on many edge features, some may not play well together. I don't have another explanation for now. 🤷‍♂️

[DmitrySharabin]

Safari supports style queries, why wasn't it working in Safari?

I still don't have an answer to this question. I can't reproduce the issue. In simple cases, everything works as expected. However, in our case, we have a hierarchy of custom elements: some are within a component's light DOM, while others are in the shadow DOM. And since we rely on many edge features, some may not play well together. I don't have another explanation for now. 🤷‍♂️

Found it! And already filed a bug report. Let's consider this PR as a workaround. 😛

Btw, style queries work correctly when <color-swatch> is in use as a standalone element—the found bug does not affect it. As a result, we can see color details in a compact way. See https://deploy-preview-202--color-elements.netlify.app/src/color-swatch/#the-info-attribute. But not in Firefox, unfortunately.