标签: lit-element

我不知道如何在LitElement中观察属性变化.

我一直在尝试这些方法,但我无法让这些方法起作用:

  static get properties() {
    return {
      temp1:String,
      temp2: {
       type:String,
       observer: '_temp2Changed'
        }
  };

  temp1Changed(newValue, oldValue){
    console.log("temp1 changed")
  }
  _temp2Changed(newValue, oldValue){
    console.log("temp2 changed")
  }

我正在使用LitElement创建自定义Web组件。我对此很陌生，因此决定尝试制作图像幻灯片。我 在修改W3Schools幻灯片以使其可用作LitElement时将其用作参考。问题是，当我尝试使用document.getElementByClassName时，我什么也没得到。由于我正在使用Shadow DOM，因此我对这个问题很熟悉，因此我将其更改为this.shadowRoot.getElementsByClassName。不幸的是，我被告知我要使用的不是函数。使用LitElement和shadow dom时如何按类名获取元素？如果您想查看我的组件的外观，下面是代码：

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

class ImageGalleryElement extends LitElement {

static get properties() { return {
    slideIndex: { type: Number },
  }};

constructor(){
    super();

    this.slideIndex=1;
    this.showSlides(this.slideIndex);
}

// Next/previous controls
plusSlides(n) {
    this.showSlides(this.slideIndex += n);
}

// Thumbnail image controls
currentSlide(n) {
    this.showSlides(this.slideIndex = n);
}

showSlides(n) {
    var i;
    console.dir(this.shadowRoot);
    var slides = this.shadowRoot.getElementsByClassName("mySlides");
    console.dir(slides);
    var dots = this.shadowRoot.getElementsByClassName("dot");
    if (n > slides.length) {this.slideIndex = 1} 
    if (n < 1) …

我有一个问题，将某些值从父组件传递到子组件并显示该值的最佳方法是什么，因为我尝试使用属性和插槽传递值，并且两种方法都有效。属性：我有一个运动列表，并在父组件中使用repeatlit-html （和html渲染方法），以便创建 n 个子组件，并给出它们属性中的值。

//father component
render(){
    return html`
        ${repeat(movements, movement => movement.id, (movement, index)=> html`
            <movement
            .id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}>
            </movement>
            <hr>
        `)}
    `    
}

//child component
render(){
    return html`
        <dt>${this.id}</dt>
        <dl>${this.description}</dl>
        <dl>${this.amount}</dl>
        <dl>${this.balance}</dl>
    `;
}

插槽：我有一个运动列表，并在父组件中使用repeatlit-html （和html渲染方法），以便创建 n 个子组件，并给出在子组件中声明的插槽中的值

//child component
render(){
    return html`
    <dd>
        <slot name="id"></slot>
        <slot name="description"></slot>
        <slot name="amount"></slot>
        <slot name="balance"></slot>
    </dd>
    `;
}

//father component
render(){
    return html`
        ${repeat(movements, movement=>movement.id, (movement, index)=>html`
            <movement>
                <dt slot="id"> ${movement.id} </dt> …

给出以下示例代码：

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

class ItemsDisplay extends LitElement {

    static get styles() {...}
    static get properties {...}

    constructor () {
        super();
        ...
    }

    render {
        return html`
            ${this.items.map((item, index, array) => html`
                <div class="name">
                    ...
                </div>
            `)}        
        `;
    }
}

选择类“name”的所有节点的适当方法是什么？

我尝试过以下方法，但均失败；所有时间nodesList都是undefined：

• 里面 constructor ：

  this.nodesList = this.shadowRoot.querySelectorAll(".name");

• 使用：

  firstUpdated(changedProperties) {
      return this.nodesList = this.shadowRoot.querySelectorAll(".name");
  }

• 在自定义函数内部：

  getNodesList() {
      let nodesList = this.shadowRoot.querySelectorAll(".name");
      ...
  }

我也尝试过：

connectedCallback() {
    super.connectedCallback(); …

我在使用 Material-Web-Component 构建自定义 Lit-Element 组件时确实遇到了问题。即使我确实给了他们必要的 sass/css 类，它们也会堆叠在一起。

我确实想使用顶栏和可扩展抽屉。但内容似乎总是呈现在左上角：/

问题： https: //i.stack.imgur.com/RzVg1.jpg

谁能帮我？:/

应用程序：

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { router } from '@fhms-wi/router';

const componentCSS = require('./app.component.scss');

@customElement('app-root')
class AppComponent extends LitElement {
  static styles = css`${unsafeCSS(componentCSS)}`;

  @property()
  title = 'Ticket-System';

  @property()
  headerItems = [
    { title: 'Anmelden', icon: 'sign-in', routePath: 'users/sign-in' },
    { title: 'Konto erstellen', icon: 'sign-up', routePath: 'users/sign-up' }
  ];

  @property()
  drawerItems = [
    { title: 'Tickets', icon: 'tickets', routePath: …

<example name="One"></example>
<example name="Two"></example>
<example name="Three"></example>

接下来的渲染看起来像这样：

<example name="Four"></example>
<example name="Three"></example>

LitElement 将删除最后一个元素并使用新属性更新前两个元素。

如何更改此设置，以便 LitElement 删除除第一个位置之外的所有元素name="three"，并在第一个位置创建一个新元素name="Four"？

使用 React，这可以通过给它们一个关键属性来完成。我想使用 LitElement 达到相同的结果。

<example key="1" name="One"></example>
<example key="2" name="Two"></example>
<example key="3" name="Three"></example>

我正在学习如何使用fetch API和lit-element在 Web 组件中获取异步数据：

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

class WebIndex extends LitElement {

    connectedCallback() {
        super.connectedCallback();
        this.fetchData();

    }

    fetchData() {
        fetch('ajax_url')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                };
                response.json();
            })
            .then(data => {
                this.data = data;
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

    render() {
        if (!this.data) {
            return html`
                <h4>Loading...</h4>
            `;
        }
        return html`
            <h4>Done</h4>
        `;
    }

}

customElements.define('web-index', WebIndex);

然而呈现的html永远不会改变。我做错了什么？这是在 Web 组件中获取异步数据的最佳方式吗？

使用 LitElement 在 Web 组件/shadowDOM 应用程序中使用大型 css 库（如 bootstrap）的最简单方法是什么？
尝试了以下方法：

1. 在组件内使用链接标签。有效，但会产生 FOUC（无样式内容的闪存）。
2. 将所有内容渲染到 Light DOM（我正在使用 LitElement，它们有一个 createRenderRoot() 重写。也可以，但随着应用程序变得更加复杂，保持组件文档隔离会很好。

寻找在此设置中使用 boostrap 的最简单方法。

在 React 中，我们可以使用它PropTypes来将特定的 prop 标记为必需的。

requiredFunc: PropTypes.func.isRequired,

Vue 还支持必需的 props：

    propC: {
      type: String,
      required: true
    },

如何在 lit-element 中做到这一点？很有趣的是，一个框架声称它非常好，但却不支持诸如必需属性之类的简单内容。

我需要在 LitElement 中以最佳方式呈现无限可滚动数据。Vaadin-grid 似乎适合该用例。然而，数据是巨大的。所以我试图从后端延迟加载数据块。此后端 api 支持以块的形式返回记录（这样在第一次调用时将返回记录总数）。有没有可能的方法可以使用LitElement从 vaadin-grid 的后端延迟加载数据块。