Unable to use native styles to style elements contained in a web component

[lloydk]

Describe the bug

I was trying to use the native styles in a web component that contained some native elements but was unable to get the native elements to style properly. It looks like some of the styles are being applied to the host element?

Demo

Here is a link to a lit playground that demonstrates the problem:

https://lit.dev/playground/#sample=examples%2Fhello-world&gist=67b7c8576c5b994ffc8ec9242f0825a3

Screenshots

All screenshots from Chrome 132.0.6834.161 on Windows 10

With radio.css included last:

With just native.css imported:

[claviska]

It looks like the imports are missing the version. Try this.

@import url('https://early.webawesome.com/[email protected]/dist/styles/native/forms.css');
@import url('https://early.webawesome.com/[email protected]/dist/styles/native/input.css');
@import url('https://early.webawesome.com/[email protected]/dist/styles/native/select.css');

The styles appear to be loading for the respective controls using those imports.

[lloydk]

The styles are loading with the existing urls (those are the urls you get when you edit an example in the docs). I can change them but I don't see how it will make a difference.

If you go into dev tools and select the simple-greeting element you can see that it's picking up the web awesome style which is causing the problems in the example images above.

With radio.css included I get a border on simple-greeting (in Chrome but not Firefox) and if I uncheck the border-style property the border goes away.

radio.css has a :host selector for some of the styles so the display property of simple-greeting becomes inline-flex. That's why the layout changes in the example images when radio.css is included.

Just for completeness, selecting an input element in the dev tools also shows that at least some of the styles are being applied to the input element.