Question

好吧，我需要它在特定时间重新解析。

为什么呢？

我动态添加一个组件，它没有得到＆＃34; polyfilled＆＃34;如果你明白我的意思。保持这样：

<div id="componente" allowfullscreen=""><viva-card1></viva-card1></div>

但是viva-card DOES有东西和原型等，它只是没有出现在firefox上。

Answer 1

是的，您可以强制webcomponents.js同步升级元素：

WebComponents.upgradeAll(document.querySelector('#componente'));

这将同步升级整个树，从#componente开始（如果它是一个组件）。

有关详细信息，请参阅webcomponentsjs/issues/#169。

Answer 2

我不确定viva-card1里面有什么内容所以这里是我在过去3个月里几乎全职使用Polymer学到的一些一般规则。

如果你在Polymer元素之外进行，那么使用

可以很好地完成它

someElement.innerHTML = 'HTML content goes here';

或者

var newDomElement = document.createElement('viva-card1');
someElement.appendChild(newDomElement);

如果在Polymer元素中注入html，请在元素的＆＃34; javascript部分使用它＆＃34;：

this.injectBoundHTML(html, elementId);

如果您包含自己的CSS：

<link id="someCSS" href="something.css" shim-shadowdom>

您可以使用

执行此操作

document.getElementById('someCSS').setAttribute('shim-shadowdom', '');

如果你需要在使用javascript加载页面后使用AJAX动态包含一个CSS文件，那么设置shim-shadowdom并不起作用，你需要使用它（使用jQuery ajax）：

$.ajax({
    url: 'link_to_css',
    dataType: 'text',
    success: function(data) {
        var css = Platform.ShadowCSS.shimCssText(data);
        Platform.ShadowCSS.addCssToDocument(css);
    }
});

如果您需要填充内联CSS，例如

<style id="the_css">
  html /deep/ div { margin: 0}
</style>

您需要为内联CSS分配ID并执行此操作（在第一行中使用jQuery）：

var data = $('#the_css').text();
var css = Platform.ShadowCSS.shimCssText(data);
Platform.ShadowCSS.addCssToDocument(css);

Answer 3

找到它。你应该致电Platform.flush()

请记住，只有在Polymer docs

所述的真正需要时才应该这样做

Answer 4

如果您正在进行某种延迟加载，可以使用Polymer.import

// Signature: Polymer.import(urls, callback)
Polymer.import( ['polymer-cat.html'], function() {
  // called when our import is fully loaded
  // including any assets like CSS.
});

这会动态和异步地加载导入。加载导入并且任何相关的聚合物元素已升级后，将调用回调。

我可以强制webcomponents.js在Firefox上重新解析DOM吗？

4 个答案: