Polymer - innerHTML - 親要素のスタイルを適用できますか？

Question

ご存知のとおり、Polymerは、多くの合理的な理由により、エスケープされていないHTMLのバインディングを禁止しています。

How to inject HTML into a template with polymer

How to display html inside template?

しかし私のプロジェクトでは、外部ソースからHTMLを適用するための要件でした。

コンポーネントは<エコーHTML >という名前のため、私が実装しました：

<dom-module id="echo-html"> 
    <template> 
     <style> 
     </style> 
    </template> 
</dom-module> 

<script> 
(function() { 
    Polymer({ 
     is: 'echo-html', 
     properties: { 
      html: { 
       type: Object, 
       value: '', 
       observer: '_refreshHtml' 
      }, 
     }, 

     _refreshHtml: function() { 
      if (this.html) { 
       var value = ''; 
       var container = Polymer.dom(this).parentNode; 

       if ((this.html.constructor == Array) && (this.html.length == 1)) { 
        value = this.html[0]; 
       } else { 
        value = this.html; 
       } 
       if (this.parentNode) { 
        this.outerHTML = value; 
       } 

       this.scopeSubtree(container, true); 
       $(this).removeClass('echo-html'); 
      } 
     }, 
    }); 
})(); 
</script> 

私が持っている問題このコンポーネントは、まさに純粋なHTMLをバインドしているので、私は< Pを使用する場合>または<強いです>または他の要素の場合、私は単純に親のコンポーネントスタイリングを使うことができないため、グローバルスタイルを使用する必要があります。

例えばので、親要素のスタイルを適用するにはどのような方法がある：

<parent-element> 
    <echo-html html$="{{some-nasty-html}}"></echo-html> 
</parent-element> 

は「いくつかの-厄介な-HTML」それに.parent-elementクラスが含まれますか？

.echo-htmlクラスも削除できますか？実はこれは私の質問です:)

Answer 1

は、ノードまたは要素に操作すると、スタイルのスコープをトリガしないだろう、ポリマーライブラリーにシェイディDOMであなたのスコープを伝えるためにPolymer.dom() APIを使用します。

Polymer.dom(this).innerHTML = '<p>My Paragraph!</p>'; 

シャドウDOMそれでライブラリを通ることなく機能するはずです。

Answer 2

私はそれを機能させたようです。私はPolymer.domとjQueryを使ってShadow DOMとnorma DOMの両方にアクセスしました。ここで

が実装され、私はこの質問を追加した後3-5時間でした - あなたはそれを使用すると、おそらく審査することを願って：

<dom-module id="echo-html"> 
    <template> 
     <style> 
     </style> 
    </template> 
</dom-module> 

<script> 
(function() { 
    Polymer({ 
     is: 'echo-html', 
     properties: { 
      html: { 
       type: Object, 
       value: '', 
       observer: '_refreshHtml' 
      }, 
     }, 

     _refreshHtml: function() { 
      if (this.html) { 
       var value = ''; 
       var container = Polymer.dom(this).parentNode; 
       var classList = Array.from($(container)[0].classList).filter(function(el) { 
        return ((el != 'echo-html') && (el != 'style-scope')); 
       }); 
       var lastClass = classList[classList.length - 1]; 

       if ((this.html.constructor == Array) && (this.html.length == 1)) { 
        value = this.html[0]; 
       } else { 
        value = this.html; 
       } 
       if (this.parentNode) { 
        this.outerHTML = value; 
       } 
       this.scopeSubtree(container, true); 

       // First step - change the Shadom DOM 
       Polymer.dom(container).classList.remove('echo-html'); 
       if (Polymer.dom(container).classList.contains(lastClass)==false) { 
        Polymer.dom(container).classList.add(lastClass); 
       } 

       // Second step - change the DOM 
       $(container).find('*').removeClass('echo-html').addClass(lastClass); 
      } 
     }, 
    }); 
})(); 
</script> 

は、すべてのあなたの助けをありがとう！あなたが問題の任意のコメントを持っている場合、ここで

は、リポジトリへのリンクです： https://github.com/krzysztofp/echo-html-polymer