标签: lit

我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件，以便在单击按钮时也显示带有面包屑的标题标题。

示例代码：

      ... 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 。

有任何想法吗？

插图

所以我有以下内容styles：

  static styles = [css, icons];

然后我将其设置renderRoot为 lightdom：

protected createRenderRoot(): Element | ShadowRoot {
    return this;
}

这样，样式就不会应用，我必须手动添加：

render() {
  return html`
 <style>
       ${css.cssText}
       ${icons.cssText}
 </style>

如果我删除createRenderRoot，样式就可以工作，而无需<style>在render函数中设置标签。

谁能告诉我我做错了什么？或者为什么会发生这种情况？

Lit 文档将 Web Test Runner 称为测试。它导航到此示例页面。

我尝试过测试MyElement，结果只有一个<p>。

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`<p>Hello, World.</p>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

通过 open-wc 测试时，该元素shadowDom没有<p>in descendant。

import { expect, fixture, html } from "@open-wc/testing";
import { MyElement } from "../src/MyElement";

it("get shadowDom", async () => { …

我想将我的Vue 2项目从 webpack 迁移到Vite。并且必须使用使用lit-element构建的第三方 Web 组件。

这些组件在运行时抛出错误（通过 vue）：

未知的自定义元素：< foo-component > - 您是否正确注册了该组件？对于递归组件，请确保提供“名称”选项。

还有（通过lit-element）

无法设置“ShadowRoot”上的“adoptedStyleSheets”属性：无法将值转换为“CSSStyleSheet”。

据我所知，那些第三方 Web 组件仅在其索引文件（内部node_modules）中执行此操作：

import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);

所以之前（使用 webpack 设置）我只是导入它们并且一切都可以工作。嗯，实际上 webpacklit-scss-loader也用于这些组件。

我认为 Vite 可能需要一些额外的配置，或者这里可能需要类似于“webpack”加载器的东西，但不确定我必须移动哪个方向。

我做错了什么？

我正在尝试在点亮元素中使用vaadin 徽章。

该文档提到“要在应用程序中使用这些类，请在 theme\xe2\x80\x99s theme.json 中启用它们”，但我没有这样的文件，所以这对我来说真的很困惑。大多数文档都集中在 Java 上，所以我猜这就是混乱的根源。到目前为止我只通过 NPM 安装了一些组件。

无论如何，我尝试创建一个frontend/themes/common-theme/theme.json文件，但到目前为止还没有成功。

这是我的元素目前的样子：

import {LitElement, html} from \'lit\';\n\nimport \'@vaadin/vertical-layout\';\nimport \'@vaadin/horizontal-layout\';\n\nimport \'@vaadin/vaadin-lumo-styles/badge.js\';\n\nexport class PaymentLink extends LitElement {\n    static properties = {\n        version: {},\n        link : { Object}\n    };\n\n    constructor() {\n        super();\n    }\n\n    render() {\n        return html`\n            <vaadin-horizontal-layout>\n                <a href="${this.link.url}">${this.link.id}</a>\n                <span theme="badge">Pending</span>\n            </vaadin-horizontal-layout>\n    `;\n    }\n\n}\ncustomElements.define(\'payment-link\', PaymentLink);\n

有人可以给我看看光吗？这是一个 stackblitz 示例：https://stackblitz.com/edit/lit-element-jjzdpa ?file=src/index.js

我有一些非常基本的代码，如下所示

#component file
import { html, LitElement } from 'lit';
import sheet from './css/styles.js';

export class CaiWc extends LitElement {
  static styles = [sheet];

  render() {
    return html`
      <h2>Hello World</h2>
      <div>ITEM 1</div>
      <div>ITEM 2</div>
      <div>ITEM 3</div>
    `;
  }
}

#styles.js
import { css } from 'lit';

export default css`
  :root {
    background-color: #0000cc;
    color: #ff0000;
  }

  :host {
    background-color: #ff0000;
    color: #0000cc;
  }
`;

我不明白为什么没有显示背景颜色。当我的标记对于第三方 Web 组件更加复杂时，该 Web 组件的背景颜色将从:host. 如果我正确阅读https://developer.mozilla.org/en-US/docs/Web/CSS/background-color，则不会继承背景颜色。但是，如果默认是透明的，为什么不填充呢？

我尝试通过编写基于 TS 的 Lit Elements 来进入 TypeScript，重构我的一个非常小的项目。

然而，它开始变得令人沮丧，因为我看不出这段代码有什么问题，因为它已简化为几乎与 HelloWorld 示例相同，但仍然给出错误：

import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('student-ids')
export class StudentIds extends LitElement {

  @property()
  name = 'Somebody';

  render() {
    return html`
      <h1>Classroom Ids</h1>
      <p>Hello, ${this.name}!</p>
    `;
  }
}

在 Chrome 中我收到错误：

Uncaught (in promise) Error: The following properties on element student-ids will not trigger updates 
as expected because they are set using class fields: name. Native class fields and some compiled …

我有一个像这样的对象属性

pageSizeValues: {
  type: Object
}

像这样被实例化

this.pageSizeValues = {10: 10, 25: 25, 50: 50};

基于它，我想构建一个包含 3 个条目的下拉列表，即通过迭代 pageSizeValues

<vaadin-select @change="${event => this.setLimit(event.target.value)}" value="${this.limit}" placeholder="Page Size" style="width: 80px">
  <template>
    <vaadin-list-box>
      ${Object.entries(this.pageSizeValues).forEach(([key, val]) => 
          {   console.log(key + " " + val);
              html`
                <vaadin-item value=${key}>${val}</vaadin-item>
                 `
            })}
    </vaadin-list-box>
  </template>
</vaadin-select> 

虽然 console.log 在 UI 中正确显示键值对，但我根本没有渲染项目。

当我迭代数组而不是对象时，我设法正确渲染项目，所以我不确定问题可能出在哪里。

我有带有 lit 的 html 元素

我将使用 get 请求设置它们的内部 html

如何设置它们？

import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
import axios from "axios";

@customElement("s-profile")
export class Profile extends LitElement {

  render() {
    return html`<p>${getProfile()}</p>`;
  }
}

// get data from api
async function getProfile(): Promise<string> {
  const username = window.location.pathname.replace("/", "");
  const result = await axios.get(
    `http://localhost:8000/api/getProfile?username=${username}`
  );
  const data: string = (<any>result).data.result.username;
  console.log(data);
  return data;
}