在 shadow dom 中运行 Angular 应用程序答案

【问题标题】：Running angular app inside shadow dom在 shadow dom 中运行 Angular 应用程序
【发布时间】：2017-03-31 17:07:05
【问题描述】：

我正在开发一个应用程序，我必须在当前页面中加载其他 angular(1.x) 应用程序（根据项目要求）。我正在尝试使用影子 DOM 概念来实现它（这可以使用 iframe 来完成，但我正在寻找更好的方法）。我试过下面的代码：

 var templateUrl = "angular-app.html",
 templateReceivedCallback = function (response) {
      var templateHolder = $("#template-holder"),
          div = document.getElementById('template-holder'),
          shadowRoot = div.attachShadow({
              mode: 'open'
           });
       shadowRoot.innerHTML = response;
     };
 $.get(templateUrl, templateReceivedCallback);

我希望 Angular 应用程序应该加载到模板持有者元素中：

 <div id="template-holder"></div>

另一个应用程序正在加载我提到的 div，但表达式未按预期编译。示例 - 具有变量 this.greeting = "Welcome!" 的 Angular 应用程序我期待这个：

 Welcome!

但它呈现为：

 {{greeting}}

有没有更好的方法来实现这一点？如果是，请与我分享运行示例。

谢谢。

【问题讨论】：

标签： angularjs templates web-component shadow-dom

【解决方案1】：

我认为这是不可能的，因为 Angular 解析引擎不会查看 Shadow DOM 内部。

作为一种解决方法，您可以将 {{greeting}} 放在普通 DOM 中。

如果您想使用 Shadow DOM，您将始终可以使用 <slot> tags 访问它。

【讨论】：