3

CSS Nesting With :host Not Working On iOS/OSx

While I already solved this issue for myself with a workaround, I bring this up for two reasons...

  • I would like to know if this is actually a bug or not
  • I searched everything under the sun and could not find anything relevant, other than the following SO Question...

"WebComponent nested CSS is invalid"

This may be a duplicate but, again, I am more interested to know if this issue is considered a bug so that I may report it to the proper party.

There is also more description & context provided below, for anyone who's interested.

Does NOT Work

:host {
    border: solid 10px tomato;
    
    .app.header {
        .header.title {
            background-color: tomato;
        }
    }
}

DOES Work

:host {
    border: solid 10px tomato;
}

.app.header {
    .header.title {
        background-color: tomato;
    }
}

Question

Should this be considered a bug on iOS/OSx? Why/not?

If so, should this be reported to Apple or the various browser manufacturers?

Context

This issue does not appear at all across virtually all browsers on both Windows and Android. However, both Safari and Chrome (and likely others) on iOS -- and MacOS, as far as I can tell -- behold the exact same behavior of the issue at hand.

This, to me, suggests that it is actually more of an Apple/OS level issue as opposed to one of the the browser manufacturers -- but I am not certain.

Please let me know a) if this is actually a bug and, b), what the right channel to report it through is. Otherwise, please inform me of what or why this is not actually a bug and perhaps what the better way to remedy this is.

Improve this question
2
  • As I already said in my answer you refer to: It is because of the shadowRoot, not a bug. If you want to dig deeper abuse the Web Components issue list at github.com/WICG/webcomponents where the Browser vendors hang out Commented Jul 15, 2024 at 10:41
  • IMO this should be a valid and officially supported form. Sometimes, shadow root CSS can wind up getting bundled unintentionally into the global scope, and wrapping the whole CSS file in :host {} neutralizes that issue. Commented Jan 31 at 17:31

1 Answer 1

Reset to default
0

My Own Workaround

I resolved the issue the exact same way for all browsers across iOS and MacOS with the following...

:host {
    border: solid 10px tomato;
}

.app.header {
    .header.title {
        background-color: tomato;
    }
}

The question remains, what is actually causing this?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.