我有一个这样的web组件
<template id="component">
<link href="/static/css/main.cacbacc7.css" rel="stylesheet">
<script src="/static/js/vendor.js" type="text/javascript"></script>
<script src="/static/js/bundle.js" type="text/javascript"></script>
<span id="react-app"></span>
</template>
<script>
(function (window, document) {
const doc = (document._currentScript || document.currentScript).ownerDocument;
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function () {
const template = doc.querySelector('template#component').content;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.cloneNode(true));
// executeThis() when all scripts have been loaded
}
},
});
document.registerElement('react-webcomponent', { prototype: proto });
})(window, document);
</script>
我可以知道我的template
中的所有script
标签何时被加载吗?
更新
我目前正在做的是
const scripts = [...shadowRoot.querySelectorAll('script')];
let scriptsLoaded = 0;
scripts.forEach(function (script) {
script.addEventListener('load', function () {
if (++scriptsLoaded >= scripts.length) {
LoadReactAppIntoShadowDomContainer(shadowRoot.querySelector('#react-app'));
}
})
});
但我希望有一种更好的方式。
关于可能的复制:它是否适用于web组件?
发布于 2017-08-07 22:14:56
据我所知,到目前为止,
onload
的事件侦听器当您定义自定义元素时,您可以拥有一个connectedCallback
,当您将元素附加到您的DOM时就会调用它
根据您正在尝试的内容,在我看来,您正在尝试确定您的影子DOM加载其内部脚本的确切时间
据我所知,脚本的作用域不是你的元素,而是全局的。
因此,与其尝试做你目前正在做的事情,
您可以简单地将onload添加到标签上,这些标签的工作方式与它们一直具有的一样。
此外,如果您想要观察影子DOM在attached
之后的变化,您可能会对mutation observers
感兴趣。
AFAIK,在构造元素本身/附加元素之前,您无法观察到DOM的变化
或者,如果您在不同的文件中定义元素,并且更喜欢使用HTML Imports
将它们导入到文档中,
您可以从导入的文档中使用webcomponentsready
侦听器,该侦听器在导入、解析和加载所有DOM时触发
如果确实有一种方法可以观察DOM或监听元素的模板附件,我也想知道。
此外,由于您正在尝试将react应用程序嵌入到自定义元素中,这可能就是您遇到何时调用loadreactapp
函数的问题的原因,您可能需要考虑在您的影子DOM中使用slots
,这将打开在浏览器上注册您的元素之后可以分发内容的位置
只需通过传入属性slot=<slotname>
来添加您的应用程序或其他自定义元素
发布于 2018-06-10 08:38:48
你的更新示例是我所知道的最好的方式。
我在通过标签导入CSS的组件上防止FOUC时遇到了类似的问题。
我能找到的唯一解决方案就是根据你的更新。QS ShadowRoot要查找<link>
或<scripts>
,请为每个对象添加一个加载事件侦听器,并比较加载计数。
您可能会考虑的一个优化是,当计数匹配时,您可以从影子根本身调度您自己的自定义加载事件,组件影子根(或更高的树)上的侦听器可以处理这些事件。
var event = new CustomEvent('load');
shadowRoot.dispatchEvent(event);
如果您希望它冒泡并跨越阴影边界,则需要将composed : true
添加到事件参数中。
var event = new CustomEvent('load', {bubbles : true, composed : true});
shadowRoot.dispatchEvent(event);
https://stackoverflow.com/questions/45545456
复制相似问题