我是 lit-element 的新手，当使用 import 来包含库时，我收到以下错误：
未捕获的类型错误：无法解析模块说明符“lit-element”。相对引用必须以“/”、“./”或“../”开头。
请提供任何替代方案/解决方案。
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render(){
return html`
<div>
<p>A paragraph</p>
</div>
`;
}
}
customElements.define('my-element', MyElement);
关于这个话题似乎有很多过时的问题，我找不到最近的一个（2018）。另外，其他问题只是着眼于使之起作用，我着眼于使该工作遵循ES6模块关于HTML导入的道路的正确路径。
所有浏览器似乎都同意html导入已死
<link rel="import" href="https://xyz.html">
如果是这样，是否有导入html的好方法
<template>
在JavaScript中使用？
我在这里找到了这个技巧- 创建和使用自定义HTML组件？，但它依赖于JavaScript文件中的HTML作为字符串。
在我的理想世界中，我可以定义一个HTML文件template.html（这样我就可以得到不错的编辑器颜色编码），但是能够导入该文件以在我的dom中使用。
我知道有像lit-html这样的库可以使此操作变得容易，但是似乎由于ES6模块现在是标准的，并且由于不推荐使用html导入来代替ES6模块，因此应该有一些简单的本地方法来做到这一点吗？
问题：有没有办法在不触发其render功能的情况下将属性更改传播到子元素？目前，当我更新父级中的属性时，switchViewModeHandler它会触发子级的重新渲染。
用例：将父级切换到“编辑”模式也应该为其所有子级切换相同的模式。
怀疑：我应该使用自定义事件吗？问题在于它将是一个复杂的嵌套元素网络，事件将变得难以快速调试（Polymer 已经遇到了这个问题）。
设置：父元素：
class ParentElement extends LitElement {
@property() viewMode;
constructor() {
this.viewMode = ViewMode.editable;
}
static get properties() {
return {
viewMode: { type: String, reflect: true },
};
}
private switchViewModeHandler(event: MouseEvent): void {
this.viewMode =
(this.viewMode === ViewMode.editing) ? ViewMode.editable : ViewMode.editing; // update my own edit mode
const options: HTMLElement[] = (Array.from(this.children) as HTMLElement[]);
options.forEach((item: HTMLElement) => {
item.viewMode = this.viewMode;
});
}
render() {
return …我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中，我发现我们可以为高度添加 mixin。我尝试了几种方法，但没有成功。可能是我使用的语法错误。我想降低文本字段的高度。这是我的文本字段
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
和我的 css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
应用的默认 css 是
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0; …我一直在学习 Polymer 并且它进来了 - 网络的未来（lit-element和lit-html）
我知道lit-html是用于 HTML 模板的，它使用了一些有效的技术。同时lit-element是一个轻量级的 web 组件基类，里面有lit-html。
问题：如果lit-element与lit-html 一起提供，我将仅将lit-element用于我的所有目的。究竟是什么点燃-HTML有自己单独的上下文明确地这样做。
在开发独立的 Web 应用程序时应该选择lit-element还是lit-html？
任何有关指导的帮助都会有很大帮助！
尝试使用 为我们的 Electron 屏幕创建一些可重用的组件lit-html。当我尝试添加示例组件时遇到错误。
使用electron: ^5.0.6
尝试导入模块my-element.js（大部分代码是示例代码，我只是想让它工作）
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module" src="my-element.js"></script>
该模块my-element.js包含以下内容：
import {LitElement, html, css} from 'lit-html';
class MyElement extends LitElement {
static get properties() {
return {
mood: {type: String}
}
}
static get styles() {
return css`.mood { color: green; …谁能告诉我为什么我不能在 lit-html 的html方法中使用变量？
const h1 = 'h1';
return html`
<${h1} class="a-heading ${classes}">
<slot></slot>
</${h1}>
`;
如果我替换${h1}为h1没有问题的作品。
javascript web-component custom-element lit-element lit-html
我使用 typescript 用lit-html编写一个简单的演示：
import {html, TemplateResult} from 'lit-html';
export default function sayHello(name: string): TemplateResult {
return html`<h1>Hello ${name}</h1>`;
}
并使用 jest 编写一些简单的测试：
import sayHello from "./sayHello";
import {render} from "lit-html";
beforeEach(() => {
render('', document.body);
})
describe('sayHello', () => {
it('says hello', () => {
render(sayHello('world'), document.body);
const component = document.querySelector('h1');
expect(component).toBeDefined();
})
})
我的“jest.config.js”是：
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
}
但是当我用 运行测试时jest，我得到了这样的错误：
FAIL src/sayHello.test.ts
? Test suite failed to run
Jest encountered an …我正在查看带有 Shadow DOM 和 customElements 的 TODO MVC 示例，在litRender.js中，函数中有一个奇怪的代码invalidate()：'await 0'。我想知道这段代码的目的是什么。
我在谷歌上进行了一些搜索，但找不到类似的案例。我对 javascript 和 Webpack 非常陌生，所以我不知道如何调试应用程序（我尝试使用 --devtool 选项重新捆绑它，但出现错误）。
作者的解释是（抱歉翻译）：
litRender.js可以在下面找到src/libs并帮助渲染此应用程序的每个组件。每个组件都litRender使用class SomeComponent extends LitRender (HTMLElement). 如果内容更新了多次，则时间代码旨在通过不每次渲染来帮助提高性能，它会收集渲染时间。在扩展它的组件上调用 this.invalidate 将保留对组件中定义的渲染函数的调用。
正如上面作者提到的，invalidate()shadow DOM是用来渲染的。下面是作者的使用方法。
我想知道 'await 0' 的litRender.js真正作用是什么。
我用 LitElement 创建了一个自定义选择组件：
import { LitElement, html } from 'lit-element';
class CustomSelect extends LitElement {
static get properties() {
return {
options: { type: Array },
selected: { type: String },
onChange: { type: Function }
};
}
constructor() {
super();
this.options = [];
}
render() {
return html`
<select @change="${this.onChange}">
${this.options.map(option => html`
<option value="${option.value}" ?selected=${this.selected === option.value}>${option.text}</option>
`)}
</select>
`;
}
createRenderRoot() {
return this;
}
}
customElements.define('custom-select', CustomSelect);
我在创建元素时传入options,selected和onChange作为属性。在第一次渲染时，一切正常。渲染所有选项，所选值反映在选择中。但是，如果我更改selected它似乎不会更新所选选项。如果我使用 …
lit-html ×10
javascript ×7
lit-element ×6
es6-modules ×2
html ×2
polymer ×2
polymer-3.x ×2
typescript ×2
electron ×1
html-imports ×1
jestjs ×1
lit ×1
mime-types ×1
ts-jest ×1