'components' 文件夹未显示在 lit-element 中

Question

当我命名一个文件夹 'components' 时，我的项目不工作，如果我命名任何其他名称（'component'、'pasta'、'templates'），它工作。路由名称很好，这 ONLY 发生在它被命名为 'components'.

的文件夹时

我在这个项目中使用 lit-element

有效

不起作用

重现步骤

npm i lit-element
touch index.html // Create a HTML file in the root folder
mkdir components // Create a folder where JS components will be
touch main.js // Create a component file
cd ..; polymer serve // Go back one directory and run the project

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
    render() {
        return html`<p>template content</p>`;
    }
}
customElements.define('my-element', MyElement);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="module" src="./components/main.js"></script>
    <title>lit-element code sample</title>
</head>

<body>
    <my-element></my-element>
</body>

</html>

NOTE this snippet code doesn't run in Whosebug, create the project and reproduce it.

将'components'文件夹的名称更改为您想要的任何名称，然后更改index.html文件中的路径。

Answer 1

正如您从日志中看到的那样，polymer serve 保留了一个以 components/ 开头的命名空间，用于提供可重用组件（Polymer's old bower_components dependency management). This prevents your components folder from being served correctly. The namespace should be configurable through the --component-url option, although it doesn't seem to work.

的遗留物）

你可以

直接用polyserve，改组件url:

$ npm i -g polyserve
$ polyserve --component-url mycustomcomponenturl

使用另一个开发服务器：open-wc 的 es-dev-server 是一个很好的选择，也被 lit-html 文档引用。

'components' 文件夹未显示在 lit-element 中

'components' folder not showing in lit-element

html

polymer

lit-element

有效

不起作用

重现步骤