1

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

所以我正在使用materializecss包。我需要导入 CSS 和 JavaScript 文件。我无法使用外部 JS 文件。我正在使用 WebPack 来捆绑文件。

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

const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <div class="container">
  <div class="center-align">
      <h3 class="blue-text text-darken-4">Company-Form</h3>
      <h5 class="blue-text text-darken-2 title"></h5>
      <div class="row">
      <div class="col s12">
      <div class="card-content">
      <div class="row form-content">
      </div>
      </div>
      <div class="card-action btn-action">
      </div>
      </div>
      </div>
      </div>
    </div>
`;

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

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

  }
 }

4

1 回答 1

1

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

  1. 默认情况下，所有 js 库都将变量和函数放在窗口中，而不是在 webcomponent 中。因此，您最好需要在所有组件加载之前在主页上加载 js 库
  2. 加载 lib 时，lib 正在等待 domcontent 加载事件，以启动 init 组件包装器。我认为它应该有效。
  3. 您编码不起作用的原因是 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
  }
 }

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

附言

  1. 每个 Web 组件都是一个小文档。
  2. 在 web 组件中最好使用 requirejs，如果您正在加载外部 js，那么您知道何时加载 lib。如果可以的话，或者动态导入。
  3. 我没有使用纯 web 组件，我使用的是 Polymer lib，试试看）

聚合物元素开始

于 2020-07-03T04:13:55.103 回答