我有一个这样的网络组件
<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'));
}
})
});
但我希望有更好的方法。
关于可能的重复:它适用于网络组件吗?
最佳答案
您的更新示例是我所知道的最佳方式。
我有一个类似的问题,希望在通过标签导入 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);
关于javascript - 加载 Web 组件时的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45545456/