标签: lit-element
将 Three.js 添加到 LitElement 类
我正在学习如何将 Three.js 集成到 Polymer 的 Lit-Element 中。我当前的问题是我需要引用 div 元素来附加 Three 的 Renderer 元素。通常是这样做的：
box = document.getElementById("box")
box.appendChild(renderer.domElement)
不幸的是，我无法找到如何从 constructor()/firstUpdate() 引用渲染函数中声明的 div。你会怎么做？
这是我目前最好的结果： 渲染器元素偏离目标
下面是获得此结果的代码： 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>Document</title>
</head>
<body>
<box-test></box-test>
<script type="module" src="src/components/box-test.js" crossorigin></script>
</body>
</html>
JavaScript：
import { LitElement, html } from '@polymer/lit-element';
import * as THREE from 'three/build/three.module';
class BoxTest extends LitElement {
constructor() {
super();
var scene = new THREE.Scene();
var camera = …推荐指数
解决办法
查看次数
LitElement 未更新列表中的复选框
我有一个简单的检查清单，每个项目都有一个删除按钮。当我检查第一个项目然后删除它时，列表更新，删除该项目，但选中下一个项目的复选框。下一项的属性是正确的。
这是我的代码：
import { LitElement, html } from 'lit-element';
class CheckList extends LitElement {
static get properties() {
return {
items: { type: Array },
};
}
constructor() {
super();
this.items = [
{
id: 1,
text: 'Item 1',
isDone: false,
},
{
id: 2,
text: 'Item 2',
isDone: false,
},
];
this.toggleCheck = this.toggleCheck.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
render() {
return html`
<ul>
${this.items.map(item => html`
<li>
<input
type="checkbox"
value=${item.id}
?checked=${item.isDone}
@click=${this.toggleCheck}
>
${item.text}
<button @click=${this.deleteItem}>X</button>
</li>
`)}
</ul> …推荐指数
解决办法
查看次数
将 Lit 与 Javascript 结合使用，无需构建工具
我正在构建一个桌面应用程序，用于监视某些事物并生成有关其正在监视的内容的数据。当用户想要与数据交互时，应用程序会启动一个非常简单的网络服务器。服务器提供静态页面并具有基本的 http API 来提供数据。我使用 html 作为通用 UI，用户使用浏览器查看数据并与之交互。
我想使用 Google 的 Lit 2 将我的 html/css/js 重写为基于组件的 Web 应用程序。我喜欢纯 Web 组件的想法，但我注意到 Lit 提供了一些很棒的附加功能。毫不奇怪，大多数 Lit 文档都面向具有构建步骤的更传统的 Web 环境。我想看看是否可以让我的服务器尽可能简单并避免传统的后端工具（打字稿编译、缩小等）。我想用一系列简单的 js 文件中的 Lit 组件替换当前的静态 html/css/js。
目前，我的服务器从“公共”目录为我的页面提供服务，并具有最小的 http API：
- public/
-- js/
-- css/
-- index.html
我应该如何在没有构建步骤的系统中使用 Lit？我需要与我自己的继承自 LitElement 的 javascript 类一起提供的最小 Lit 文件集是多少？
推荐指数
解决办法
查看次数
将更改从一个LitElement传播到一个子LitElement的正确方法是什么？
我有一个LitElement，代表多个文件的文件上传。这使用代表每个文件的子组件。
我正在努力寻找使用LitElements将更改传播到子组件中的最佳做法的示例，因为它似乎与Polymer 3完全不同
这是我正在尝试的简化示例：
import './uploadFile.js';
class Upload extends LitElement {
...
static get properties() { return { files: Object } }
_render({files}) {
return html`
<input type="file" multiple onchange="...">
${this.renderFiles(files)}`
}
renderFiles(files) {
const filesTemplate = [];
for (var i = 0; i < files.length; i++) {
filesTemplate.push(html`
<upload-file file="${files[i]}"></upload-file>
`);
}
return filesTemplate;
}
}
当我更新文件的状态时，上载组件会重新渲染，但上载文件组件不会。
我在这里做错了什么？那里没有LitElement用法的示例。
TIA
推荐指数
解决办法
查看次数
lit-element 将数据从一个组件传递到另一个组件
我目前正在学习如何使用 lit-element v2.0.0-rc.2 我有两个组件 app.js 和 list-items.js。在 app.js 中，我从本地存储中收集数据并将其存储在 this.todoList 中，然后我在我的 list-items.js 中调用 this.todoList 但我遇到的问题是它没有将数据作为数组传递但作为一个对象，我试图在列表项中输出该数据，当我执行 this.todoList 的 console.log 时，我得到的所有数据是 [object] 在我的
class TodoApp extends LitElement{
static get properties(){
return{
todoList: Array
}
}
constructor(){
super();
let list = JSON.parse(localStorage.getItem('todo-list'));
this.todoList = list === null ? [] : list;
}
render(){
return html `
<h1>Hello todo App</h1>
<add-item></add-item>
<list-items todoList=${this.todoList}></list-items>
`;
}
}
customElements.define('todo-app', TodoApp)
list-items.js
import { LitElement, html …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
从元素外部调用 LitElement 方法
我有一个简单的 LitElement 组件，如下所示：
class MyElement extends LitElement {
constructor() {
super();
}
customMethod(data) {
// do something with the passed parameter
}
render() {
return html`<div id="element"></div>`;
}
}
customElements.define('my-element', MyElement);
我希望能够从我的元素外部调用该 customMethod。
例如，如果我将元素添加到网页，如下所示：
<my-element></my-element>
然后我希望能够向页面添加一些 JavaScript 并调用该 customMethod。
我试过：
var element = document.getElementById('element');
element.shadowRoot.customMethod('example data');
但它声称它不可用...我如何调用 LitElement 实例上的方法？
推荐指数
解决办法
查看次数
LitElement：在小型 Web 组件内创建许多自定义样式规则与几个动态规则时的最佳实践（或最佳性能）？
因此，我正在开发一个非常小的 Web 组件，作为更大的设计系统的一部分。
我对 Web 组件的使用有点陌生，但我知道这个特定的 Web 组件可以在单个布局中使用很多很多次。
此 Web 组件控制在传递给它的任何子组件周围放置多少垂直空间。
该组件的结构非常简单：
import { LitElement, html, css, unsafeCSS, property, customElement } from 'lit-element';
export const spacingAmounts = {
'x-small': css`4px`,
'small': css`8px`,
'medium': css`12px`,
'large': css`16px`,
'x-large': css`20px`,
'2x-large': css`30px`,
'3x-large': css`40px`,
'4x-large': css`60px`,
'5x-large': css`90px`,
'6x-large': css`120px`,
};
const createSpacingStyleRules = (direction: 'top' | 'bottom') => {
return Object.keys(spacingAmounts).map(s => {
const amount = spacingAmounts[s];
return css`
:host([${unsafeCSS(direction)}="${unsafeCSS(s)}"]) {
margin-${unsafeCSS(direction)}: ${unsafeCSS(amount)};
}
`;
});
};
@customElement('gu-vertical-space')
export class GuVerticalSpace …推荐指数
解决办法
查看次数
LitElement 中的传单用法
我目前正在开发一个使用 LitElement 组件的应用程序。我想将 Leaflet 集成到其中，但在显示地图时遇到问题。我已经使用 npm 在我的项目中安装了 Leaflet，并创建了一个如下所示的类。
import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';
class Map extends LitElement{
static get styles() {
return [css``];
}
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
let map = L.map('mapid').setView([51.505, -0.09], 13);
let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
}
render() {
return html`
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
<div id="mapid" style="height: 100%"></div>
`;
}
}
customElements.define("my-map", Map);
运行我的应用程序会导致以下错误：未捕获类型错误：无法设置未定义的属性“L”。我对如何使用 Leaflet 在 LitElement 应用程序中显示地图有点迷失，并且非常感谢您能推动我走向正确的方向。
推荐指数
解决办法
查看次数
Lit-element，如何连接TemplateResult？
我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件，以便在单击按钮时也显示带有面包屑的标题标题。
示例代码：
... private getTemplateResultFromProperty: TemplateResult[] = []; ...
//This works fine:
func1(): TemplateResult {
return html`
<custom-header-template
.data=${data}'>
</custom-header-template>`
}
//Can't return concatenated header
func2(): TemplateResult {
//repeat does not work, this returns empty strings
return html`${repeat(this.getTemplateResultFromProperty, t => t)}`;
}
我们只能在func2方法中通过指定数组元素而不使用 html`` 来返回并显示新标头，如下所示：return this.headerTemplateArray[1]但这不是我们想要做的。
错误消息：Uncaught (in promise) TypeError: Cannot read property 'split' of null at new Template (template.js:87)当我们尝试这样做时：return html`${this.getTemplateResultFromProperty}`;
在这种方法中， html`` 方法似乎对我们根本不起作用...所以我们怀疑我们使用Repeat() 的方式可能存在问题，或者我们以错误的方式连接/使用 TemplateResult 。
有任何想法吗？
推荐指数
解决办法
查看次数
标签 统计
lit-element ×10
lit-html ×5
javascript ×3
polymer ×3
lit ×2
breadcrumbs ×1
css ×1
leaflet ×1
performance ×1
polymer-3.x ×1
three.js ×1