Angular 2 总是将 <style> 标签放在根 <head>答案

【问题标题】：Angular 2 always places <style> tags at root <head>Angular 2 总是将 <style> 标签放在根 <head>
【发布时间】：2016-07-07 13:22:23
【问题描述】：

除非组件有encapsulation: ViewEncapsulation.Native，否则模板中的所有<style> 标签都放在主DOM 的<head> 部分中。有什么技巧可以破解吗？

我的用例是：

我动态加载外部 HTML 模板并将其嵌入，从而创建了一个组件。
我不希望链接或嵌入的样式影响应用程序的其余部分。
我不能使用 Native 封装，我必须保留主 DOM。那是因为我使用了一些操作 DOM 的 jQuery 库，但它们在 Shadow DOM 中无法按预期工作。此 jQuery 库使用此自定义组件中加载的指令工作。
我尝试将<link href="url"> 替换为<style>@import "url"</style>，但它们总是移动到根目录<head> 并影响整个应用程序。

有什么想法吗？如果没有办法解决这个问题，我应该尝试修复第 3 点。

谢谢！

【问题讨论】：

【解决方案1】：

样式被重写，以便选择器包含唯一的_ngcontent-xxx 属性，这些属性被添加到每个元素并且只匹配这些元素。

对于添加到 <head> 的样式，您无能为力。

如果这些样式影响其他元素，则可能是一个错误，或者您可能以仿真未涵盖的方式使用它。

【讨论】：

如果我使用ViewEncapsulation.None，样式仍然移动到<head>。而且它们会影响其他元素（无论封装选项如何），因为它们是外部 CSS，因此不会添加唯一属性。
我明白了。为什么使用None？在大多数情况下，这不是必需的。您可以通过自己向组件添加属性来以不会冲突的方式编写样式，就像Emulated 自己喜欢:host(my-component) { ...} 这样它们只应用于<my-component> 标签。
是的，这里的问题是样式是外部的，完全不受我的控制。
我猜浏览器不支持向没有原生 shadow DOM 的元素添加样式，因此 Angular2 也无能为力。
好吧，在这种情况下，我将集中精力尝试使 jQuery 插件与 shadow DOM 一起工作。谢谢！