在自定义web元素中加载外部JavaScript文件

我的目标是使用自定义web元素创建自定义表单组件。我需要为表单组件添加样式

所以我用的是软件包。我需要导入CSS和JavaScript文件。我无法使用外部JS文件。我正在使用WebPack打包文件

在代码中，我试图加载MaterializeJS文件，但它不起作用。我不知道如何在自定义web元素中加载Js文件。请有人帮帮我

const template=document.createElement（'template'）；
template.innerHTML=`
公司形式
`;
导出默认类MyForm扩展HtmleElement{
构造函数（）{
超级（）；
//阴影dom
const shadowDOM=this.attachShadow（{mode:'open'}）；
//呈现模板
appendChild（template.content.cloneNode（true））；
}
}

是的，你可以。我并没有测试你们的代码，但我认为问题在于webcomponents的封装

所有js库都是通过 默认设置，不在webcomponent中。所以最好先在主页上加载js库 组件加载

加载lib时，lib正在等待domcontent 加载事件，用于启动init组件包装器。我想 它应该会起作用

代码不起作用的原因是 lib正在搜索文档中的元素，但看不到任何元素 由于封装，webcomponents包含内部子级

结论:

export default class SodisysForm extends HTMLElement {
  constructor() {
    super();
    // shadow dom
    const shadowDOM = this.attachShadow({ mode: 'open' });

    // Render the template
    shadowDOM.appendChild(template.content.cloneNode(true));

    var elems = shadowDOM.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, []); //example of select init
  }
 }

您需要手动初始化正在使用的每个组件

附言

每个网络组件都是一个小文档

在web组件中，如果您正在加载外部js，最好使用requirejs，在这种情况下，您知道何时加载lib。或者动态导入，如果可以的话

我没有使用纯网络组件，我使用的是Polymer lib，试试看）

---

您还没有加载css和js吗？还是只有css才有问题？@AlexNikulin我对css没有问题。我唯一需要知道的是，我是否可以在web组件中加载外部JS文件。