Question

正如您可能知道的那样 - 聚合物出于许多合理的原因禁止未转义的HTML绑定。

How to inject HTML into a template with polymer

但是在我的项目中，需要从外部源应用HTML。

因此，我实现了一个名为＆lt; echo-html＆gt;的组件：

<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，所以当我想使用＆lt; p＆gt;时或者＆lt; strong＆gt;或任何其他元素，我不能简单地使用父组件样式，因此需要使用全局样式。

有没有办法应用父元素的样式，例如：

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

＆＃34; some-nasty-html＆＃34;将包括.parent-element课程吗？

我有没有办法删除.echo-html课程？其实这是我的问题:)）

Answer 1

使用Polymer.dom() API告诉聚合物库Shady DOM中的范围，操作Node或Element不会触发样式范围：

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

使用Shadow 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

Polymer - innerHTML - 我可以应用父元素的样式吗？

2 个答案: