iOS/OSx：带有主机选择器的 CSS 嵌套不起作用

Question

CSS 嵌套

:host

不适用于 iOS/OSx

虽然我已经通过解决方法为自己解决了这个问题，但我提出这个问题有两个原因......

• 我想知道这是否真的是一个错误
• 我搜索了阳光下的所有内容，但找不到任何相关的内容，除了以下SO问题...

“WebComponent 嵌套 CSS 无效”

这可能是重复的，但我更想知道这个问题是否被视为错误，以便我可以将其报告给适当的一方。

下面还提供了更多描述和上下文，供感兴趣的人使用。

不起作用

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

有效

:host {
    border: solid 10px tomato;
}

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

问题

这应该被视为 iOS/OSx 上的错误吗？为什么/不？

如果是这样，是否应该向 Apple 或各个浏览器制造商报告？

背景

Windows 和 Android 上的几乎所有浏览器都不会出现此问题。然而，据我所知，iOS 和 MacOS 上的 Safari 和 Chrome（以及可能的其他浏览器）都遇到了与当前问题完全相同的行为。

对我来说，这表明这实际上更多是 Apple/操作系统级别的问题，而不是浏览器制造商之一 - 但我不确定。

请告诉我 a) 这是否确实是一个错误，以及 b) 报告该问题的正确渠道是什么。否则，请告诉我这实际上不是一个错误，或者为什么这实际上不是一个错误，也许还有更好的补救方法是什么。

Answer 1

我自己的解决方法

我以完全相同的方式解决了 iOS 和 MacOS 上所有浏览器的问题，方法如下...

:host {
    border: solid 10px tomato;
}

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

问题仍然存在，到底是什么造成了这种情况？