open-wc 如何在遗留应用程序中使用 Web 组件

Question

我查看了 open-wc 生成器。我可以生成 Web 组件库和 Web 组件应用程序，但生成的 README 文件和文档不包含如何将 Web 组件库导入另一个库或应用程序的描述，以便库或应用程序可以将依赖项用作 Web零件。有没有我可以用来学习的带有 open-wc 的示例但非平凡的应用程序构建？

我的主要兴趣是将几个 Web 组件导入到一个不使用 npm 和 rollup 的遗留应用程序中。最好的方法是什么？

我试图做的事情。我通过运行创建了一个库 litelement-demo

npm init @open-wc

我以类似的方式创建了一个应用程序。在这两种情况下，我都选择使用打字稿。 libelement-demo 的 README.md 说明可以这样使用：

<script type="module">
  import 'litelement-demo/litelement-demo.js';
</script>

<litelement-demo></litelement-demo>

我已将此 sn-p 添加到应用程序的 index.html 并运行

npm i --save ../litelement-demo
npm run build

但第二个命令失败并显示错误消息

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
litelement-demo/litelement-demo.js (imported by inline-module-index-1.js)

错误消息中的链接没有帮助，打开的 webcomponent 文档和生成的 README.md 文件也没有帮助。

Answer 1

典型的web组件基本上是这样一个类：

// You can also use some external library and inherit from its base class.
// For example: LitElement
class BasicSetup extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // Template/DOM generation
  }

  // One or more methods...
}

// Registration
customElements.define('basic-setup', BasicSetup);

查看注册声明。只需将此文件添加到您的 HTML scripts 部分即可。您不必与任何现有的库或解决方案集成。无论您在哪里拥有 HTML，您都可以简单地将其用作

<div>
  <p>My Awesome web component</p>
  <basic-setup></basic-setup>
</div>

如果您无权访问 BasicSetup 类引用，也可以使用 JavaScript 使用 customElements.get(name) 方法初始化元素。

// Get reference to basic-setup class assuming it is already registred.
const ClassRef = customElements.get('basic-setup');

// Initialize using constructor
const myCustomElm = new ClassRef();

// or use document.createElement
const myCustomElm = document.createElement('basic-setup');

document.body.appendChild(myCustomElm);

Answer 2

由于您的旧应用程序不使用 npm，因此您无需对 npm 进行任何操作。

只需在头部添加

<script type="module">
  import 'litelement-demo/litelement-demo.js';
</script>

然后使用

<litelement-demo></litelement-demo>

在您的 html 中的某处。无需其他操作即可开始工作