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

Question

您可能知道 - Polymer 出于许多合理的原因禁止未转义的 HTML 绑定。

How to inject HTML into a template with polymer

How to display html inside template?

但是在我的项目中，需要应用来自外部源的 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>

“some-nasty-html”会在上面包含.parent-element 类吗？

有什么方法可以删除.echo-html 类吗？其实这是我的问题:)

Answer 1

看来我已经成功了。我使用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

Answer 2

使用Polymer.dom() API 告诉聚合物库您在 Shady DOM 中的作用域，在节点或元素上进行操作不会触发样式作用域：

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

使用 Shadow DOM，它应该可以在不通过库的情况下工作。