Web Component使用ng-content时投影内容脱离shadow-root问题

• Shadow DOM 封装策略配置冲突
  首先检查自定义组件的 encapsulation 配置，以及两个模块的全局封装策略是否一致。如果主模块通过 COMPILER_OPTIONS 全局覆盖了默认的视图封装模式为 ViewEncapsulation.Emulated 或 None，会导致组件无法正常创建 Shadow DOM 承接投影内容，子节点会被渲染到宿主元素外部。
• 自定义元素注册时机滞后
  出问题的主模块中，my-web-component 的自定义元素注册时机晚于 Angular 框架的节点渲染时机。浏览器在未识别到自定义元素时，会先将其内部的子节点作为普通 DOM 直接渲染，后续自定义元素注册完成、创建 Shadow DOM 后，已渲染的子节点不会被自动移入 Shadow DOM 完成投影，就会出现内容落在 Shadow Root 外的情况。
• 全局DOM操作/指令劫持
  检查主模块中是否存在全局注册的自定义结构型指令、DOM 操作逻辑，会主动遍历并移动自定义元素的直接子节点，导致投影内容被移出 Shadow Root 范围。
• 自定义元素命名冲突
  主模块中存在另一个同名的 my-web-component 自定义元素提前完成注册，且该组件未定义内容投影的插槽逻辑，导致传入的子节点无法被正常承接，直接渲染在外部。
• Polyfill 加载异常
  如果项目使用了 Web Components 相关 Polyfill 兼容低版本浏览器，检查主模块的 Polyfill 加载顺序、完整性：缺失对应 Polyfill 或加载顺序晚于组件初始化逻辑，会导致自定义元素的投影逻辑失效。

内容的提问来源于stack exchange，提问作者Aleksandr Shavalda