当web组件已加载时引发
我有一个这样的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组件？
回答 2
Stack Overflow用户
发布于 2017-08-07 22:14:56
据我所知，到目前为止，
- 您的影子根
- 中没有dom的
onload的事件侦听器当您定义自定义元素时，您可以拥有一个connectedCallback，当您将元素附加到您的DOM
时就会调用它
根据您正在尝试的内容，在我看来，您正在尝试确定您的影子DOM加载其内部脚本的确切时间
据我所知，脚本的作用域不是你的元素，而是全局的。
因此，与其尝试做你目前正在做的事情，
- 查询影子根的DOM结构，收集脚本标记并附加onload，
您可以简单地将onload添加到标签上，这些标签的工作方式与它们一直具有的一样。
此外，如果您想要观察影子DOM在attached之后的变化，您可能会对mutation observers感兴趣。
AFAIK，在构造元素本身/附加元素之前，您无法观察到DOM的变化
或者，如果您在不同的文件中定义元素，并且更喜欢使用HTML Imports将它们导入到文档中，
您可以从导入的文档中使用webcomponentsready侦听器，该侦听器在导入、解析和加载所有DOM时触发
如果确实有一种方法可以观察DOM或监听元素的模板附件，我也想知道。
此外，由于您正在尝试将react应用程序嵌入到自定义元素中，这可能就是您遇到何时调用loadreactapp函数的问题的原因，您可能需要考虑在您的影子DOM中使用slots，这将打开在浏览器上注册您的元素之后可以分发内容的位置
只需通过传入属性slot=<slotname>来添加您的应用程序或其他自定义元素
Stack Overflow用户
发布于 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
复制相似问题