シャドードームの中で角型アプリケーションを実行

Question

私は現在のページ（プロジェクトごとの要件として）内に他の角度（1.x）アプリケーションをロードするアプリケーションを開発しています。私はshadow DOMのコンセプトを使ってそれを達成しようとしています（これはiframeを使って行うことができますが、より良いアプローチを探しています）。他のアプリは、私が言及したdiv要素にロードされ

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

、しかし表現：私は角度のアプリケーションがテンプレートホルダ要素内にロードする必要があることを期待してい

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); 

：私は、コードの下に試してみました期待どおりにコンパイルされません。例 - 変数this.greeting = "Welcome！"を持つ角型アプリそして私はこれを期待しています：

Welcome! 

をしかし、それはとしてレンダリング：

{{greeting}} 

はこれを達成するための任意のより良い方法はありますか？はいの場合は、実行例を私と共有してください。

ありがとうございました。

Answer 1

Angular parsing engineはShadow DOMの内部を見ないので、これは不可能だと思います。

回避策として、{{greeting}}を通常のDOMに入れることができます。

シャドウDOMを使用する場合は、常に<slot> tagsでアクセスできます。