Polymer - innerHTML - 부모 요소의 스타일을 적용 할 수 있습니까?

Question

아마 알고 계시 겠지만 - Polymer는 여러 가지 이유로 인해 이스케이프 처리되지 않은 HTML 바인딩을 금지합니다.

How to display html inside template?

How to inject HTML into a template with polymer

그러나 내 프로젝트에 외부 소스에서 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을 결합 그래서 내가 < 페이지를 사용할 때 > 또는 < 강한 > 또는 다른 요소를 사용하면 단순히 부모의 구성 요소 스타일을 사용할 수 없으므로 전역 스타일을 사용해야합니다.

예를 들어, 그래서 부모 요소의 스타일을 적용 할 수있는 방법이 있나요 :

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

는 "일부-불쾌한-HTML"그것에 .parent-element 클래스를 포함?

.echo-html 클래스도 제거 할 수 있습니까?

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

그림자 DOM 그것으로 : 사실이 내 질문 :

Answer 1

는, 폴리머 라이브러리에게 그늘 DOM에서 범위를 이야기하는 Polymer.dom() API를 사용하여 노드에 조작 또는 요소는 스타일 범위 지정을 트리거하지 않습니다이다 라이브러리를 통해 배관 작업없이 작동해야합니다.

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