我在 Lit-Element Web 组件中有这个数据列表：
<input list="cars" name="car" placeholder = "Type car name">
<datalist id="cars">
<option value="Jeep">
<option value="Lamborghini">
<option value="Ferrari">
<option value="Fiat 500">
<option value="Gran Torino">
</datalist>
如果我从列表中选择这些选项之一，然后再次单击输入字段，我将看不到选项列表，而只能看到选定的选项。如果我想查看所有选项，我必须用键盘手动删除输入字段上写的选项。
即使选择了这些选项之一，是否存在显示所有选项的方法？
或者更好的是，是否存在一种清除焦点或单击时输入字段的方法？
没有 JQuery。
我想在我的 Angular 应用程序中使用 Polymers LitElement。
为此，我在应用程序test.js的assets文件夹中创建了一个示例组件 ( ) ，并将其导入到index.html.
测试.js：
// Import the LitElement base class and html helper function
import { LitElement, html } from '../../../node_modules/lit-element/lit-element';
// Extend the LitElement base class
class Test extends LitElement {
render(){
return html`
<h1>Test works!</h1>
`;
}
}
// Register the new element with the browser.
customElements.define('ti8m-test', Test);索引.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgInAction</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" …我想静态地为一个项目提供服务，该项目使用 webcomponents（使用 lit-html），没有任何打包工具，如 webpack 等。
示例项目由以下结构组成：
index.html
app.js
package.json
package.json：
{
"name": "lit",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.7",
"lit-element": "^2.0.1"
}
}
app.js：
import { LitElement, html } from 'lit-element';
class FooElement extends LitElement {
render() {
return html`<div>hello world!</div>`;
}
}
window.customElements.define('x-foo', FooElement);
最后，index.html：
<!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">
<title></title> …我想开始利用现在所有主要 Web 浏览器都支持的http://webcomponents.me W3C 标准。
我研究了互联网，到目前为止我发现了以下框架：
模板 - 由离子创建。所有离子组件都使用这个框架/编译器来构建原生支持的 Web 组件。
lit-element - 由 Google 创建，是 Polymer 框架的一部分。
SkateJS - 不知道这背后的原因，但它位于前 3 名流行的 Web 组件框架中。
有人可以给我建议或意见哪个框架最好吗？
javascript web-component stenciljs native-web-component lit-element
我想在插槽上没有内容时显示文本。
class List extends LitElement {
public render() {
return slot.length === 0
? html`No content is available`
: html`<slot></slot>`;
}
}
我尝试简单地将其加载到渲染的 HTML 中，但这不起作用。
当前代码：
render() {
return html `<script @onload="${this.mapKitLoadedCallback}" src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>`;
}
我们正在使用 LitElement 构建自定义组件（非公开）。我们将其称为 CompA 和 CompB。我们正在使用 CDN 发布包。
我们通过类型模块的 Script 标签在 HTML 中使用它。当每个组件是页面上唯一的组件时，它都可以正常工作。当我们在同一页面上导入 CompA 和 CompB 时，我们遇到了问题。
未捕获的 DOMException：无法在“CustomElementRegistry”上执行“define”：名称“dom-module”已与此注册表一起使用
我知道问题的产生是因为 CompA 和 CompB 使用了类似的 UI 组件集。可能是纸张输入、纸张按钮等。
在使用 LitElement 构建组件时，有没有办法通过更好地控制 CustomElementRegistry 的命名和“dom-module”以外的名称来避免此错误。
更新：我认为我提问时不够清楚，所以我更新了问题。
首先让我说我以前从未真正使用过 Angular。我正在尝试调试我的 Web 组件库的一位用户面临的问题。
我有一个使用 lit-element 的自定义元素，它具有布尔属性。该布尔属性有一个自定义属性转换器，使其将字符串“false”视为假（与本机 html 元素布尔属性相反，其中该属性的存在使其为真）。转换器看起来像这样：
{
fromAttribute(val) {
if (val === 'false') {
return false;
}
if (val === '') {
return true;
}
return Boolean(val);
},
toAttribute(val) {
if (!val) {
return null;
}
return '';
}
}
据我所知，Angular 有两种将值绑定到模板中的 html 元素的方法：
enabled="{{ enabled }}"[enabled]="enabled"对于像 这样的本机元素<img>，属性绑定按预期工作 - 我在检查 html 时可以看到该属性。
对于自定义元素，似乎根本没有设置属性 - Angular 似乎无论如何都在设置属性。但是，它正在对值进行字符串化。
这是一个试图证明这一点的 stackblitz：https ://stackblitz.com/edit/angular-lit-element-1vz1nf?file=src%2Fapp%2Fapp.component.ts
我有一个<hello-world>接受name, 和的自定义组件enabled。如果您检查 html，则 name 根本没有设置为属性。 …
刚从点燃元素开始
在我的渲染中我有：
return html`
${this.jobCreate}
${this.jobDetails}
`;
找工作创建工作正常
这是我的工作详情：
get jobDetails() {
const jobs = [
{ name: "phoenix job", location: "phoenix", expires: "2020-10-01" },
{ name: "chicago job", location: "chicago", expires: "2020-10-01" },
{ name: "pittsburgh job", location: "pittsburgh", expires: "2020-10-01" },
];
return html`<ul>
${jobs.forEach((job) => html`<li>${job.name}</li>`)}
</ul>`;
}
检查元素我可以看到一个空<ul>集
如果做一个<ul><li>${jobs[2].name}</li></ul>有效的
如果我控制台输出作业，我可以看到所有正确的作业在循环中打印 3 次
我不明白为什么我不能得到<li>在循环中渲染
我用这个作为参考：https ://lit-element.polymer-project.org/guide/templates#template-syntax-cheat-sheet
Typescript Lit Element 入门项目在示例元素的底部包含此全局接口声明：
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}
有必要吗？它是干什么用的？
lit-element ×10
javascript ×5
angular ×2
html ×2
polymer ×2
typescript ×2
es6-modules ×1
lit-html ×1
onclick ×1
onfocus ×1
polymer-3.x ×1
render ×1
stenciljs ×1
systemjs ×1