标签: lit-element

我有一个对象如下。现在，当我更改属性并调用 requestRender 时，它不会触发。据我所知，未检测到属性更改。我怎样才能做到这一点？

static get properties() {
  return {
    items: Object
    }
}

constructor() {
  super();
  this.items = {
    list: [{ a: 5, b: 6 },{ a: 5, b: 6 }]
  }
}

onClick() {
  this.items.list[1].a = 10; //change property
  requestRender(); //doesn't pick up the change...
}

有没有办法在主机中获取子元素（按其名称）？我只知道如何使用 id 和this.shadowRoot.getElementById()

import { LitElement, html } from 'lit-element';
import './child-element.js';

class ParentElement extends LitElement {
  render() {
    return html`<child-element someattribute="somevalue"></child-element>`;
  }
}

我正在尝试使用Polymer 项目中的PWA Starter Kit制作一个小应用程序。

是否可以在我的 LitElement 中使用来自https://material.io/develop/web/components/input-controls/text-field/的 Web 组件？我想使用文本区域。

我尝试过的：

import {html, customElement, LitElement} from "lit-element";
//
import {MDCTextField} from '@material/textfield';

@customElement('text-editor')
export class TextEditor extends LitElement {

    protected render() {
        return html`<div class="mdc-text-field mdc-text-field--textarea">
  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label for="textarea" class="mdc-floating-label">Textarea Label</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>`
    }

}

但是，因为我不在任何地方使用“MDCTextField”，TypeScript 编译器抱怨“'MDCTextField' 已声明，但它的值从未被读取。”。

我确实在 HTML 中呈现了一个文本区域，但没有应用任何样式。

如何在 LitElement 中重用 MDCTextField Web 组件？

在处理光照元素组件库时，我遇到了一个尴尬的场景。

我目前正在处理的组件是“警报”。在它的渲染模板中，它有两个命名槽：“title”和“text”。

<div class="alert-item-content">
   <i class="alert-item-icon"></i>
   <slot name="title"></slot>
   <slot name="text"></slot>
</div>

分配给这些插槽的元素可能是任何有效的文本标签（h1、h2、h3 等）。我需要将插槽的分配元素定位到 A) 删除/重置影响它们的全局样式和 B) 添加对 UI 要求至关重要的特定样式。

因此，换句话说，一个人可能会提供一个“h5”，因为它在语义上是正确的，但作为一个警告标题，它应该始终显示相同。

例子：

<mult-alert>
  <mult-alert-item>
    <h5 slot="title">Notice Me</h5>
    <p slot="text">
      This is something you should probably
      <a href="#">pay attention to</a>
    </p>
  </mult-alert-item>
</mult-alert>

到目前为止，我能想到的唯一解决方案是查询 shadowRoot 中分配的元素并向它们添加一个类。它确实有效，但感觉很糟糕。这是来自组件的相关代码：

addClassesToSlottedNodes() {
  [{
    slotName: 'title',
    className: 'alert-item-title'
  }, {
    slotName: 'text',
    className: 'alert-item-text'
  }].forEach(n => {
    const slotNodes = this.shadowRoot
      .querySelector(`slot[name="${n.slotName}"]`)
      .assignedNodes();

    if (slotNodes && slotNodes.length) {
      slotNodes[0].classList.add(n.className);
    }
  })
}

有没有更好的方法来定位这些带槽的元素而不用这种方式添加类？或者，是否有更简洁的方法在组件模板中添加类？

正如文档所说：

每次将自定义元素附加到文档连接元素时都会触发 connectedCallback

还：

firstUpdated 在您的组件第一次更新和呈现后触发

问题是我无法弄清楚它们之间的区别。那么区别是什么呢？当我应该使用connectedCallback，当firstUpdated生命周期挂钩？

<div @click=${this.click_cb.bind(this, record)}>${record.msg}<div>

这是将参数传递给侦听器的正确方法吗？

当页面首次加载时，由以下代码生成的删除按钮按预期工作。但是，如果您更改其中一个<textarea>元素中的文本，则删除按钮将不再正常工作。我怎样才能解决这个问题？

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

class MyElement extends LitElement {
  static get properties() {
    return {
      list: { type: Array },
    };
  }
  constructor() {
    super();
    this.list = [
      { id: "1", text: "hello" },
      { id: "2", text: "hi" },
      { id: "3", text: "cool" },
    ];
  }
  render() {
    return html`${this.list.map(item =>
        html`<textarea>${item.text}</textarea><button id="${item.id}" @click="${this.delete}">X</button>`
    )}`;
  }
  delete(event) {
    const id = event.target.id;
    this.list = this.list.filter(item => item.id !== id);
  }
}
customElements.define("my-element", …

我有 2 个发光元素组件。父内容是：

<s-sortablelist>
${this.renderChildren()}
</s-sortablelist>

该renderChildren函数正在遍历数组属性children = [1, 2]并创建<div>元素。呈现的页面可能类似于：

<s-sortablelist>
  <div id="1"></div>
  <div id="2"></div>
</s-sortablelist>

sortablelist 组件允许用户<div>使用拖放重新排序标签。在 dnd 之后，渲染的布局可能会变成（2 和 1 被还原）：

<s-sortablelist>
  <div id="2"></div>
  <div id="1"></div>
</s-sortablelist>

用户更改顺序后，如果我更改属性children=[3,4]，结果与我的预期不同：

• 我期待看到孩子们的新名单 3,4
• 我看到一个包含 3,4 和其他一些元素 (1, 2) 的列表，具体取决于我之前所做的 dnd 操作

所以我的问题是它应该如何工作？如果 children 数组发生变化，因为它是一个属性，父组件将呈现。

我也期待sotablelist重新渲染组件，但为什么我会有来自先前渲染的额外子项？

有没有办法基本上呈现这三种可能性：

<my-el someValue="a"></my-el>
<my-el someValue="b"></my-el>
<my-el></my-el> 

注意someValue第三个属性的明显缺失。

为了正常渲染这个，我会这样做：

render() {
  const someValue = "a";

  return html`
    <my-el someValue=${someValue}></my-el>
  `;
}

但如果someValue是undefined，它会呈现<my-el someValue="undefined"></my-el>我不想要的样子。

有没有办法让虚假的行为类似于布尔值，但显示真实值的值？我阅读了文档，但希望我遗漏了一些东西。

我想这样做的原因是因为我想要一个 CSS 选择器，它会影响所有这些，而[someValue]不管实际值是什么，但如果它不存在就不要应用它。

PS，我知道使用:not([someValue=undefined])或返回条件 HTML等解决方法，所以请不要回复这些。我现在正在使用其中一个，但如果我的问题有直接答案，希望能用更简洁的代码替换它。谢谢。

我有一个简单的 LitElement 类，我想用一些内部 CSS 设置样式：

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


@customElement('address-card')
export class AddressCard extends LitElement {

  @property()
  streetAddress?: string;

  @property()
  postalCode?: string;

  @property()
  city?: string;


  static get styles() {
    return css`
      .address { border: 1px dashed gray; }
      `;
  }

  render() {
    return html`
    <div class="address">  
      <div>${this.streetAddress}</div> 
      <div>${this.postalCode} ${this.city}</div>
    </div>
    `;

  // Remove this method to render the contents of this view inside Shadow DOM
  createRenderRoot() {
    return this;
  }
}

该static get styles()方法应该允许我向组件添加样式，但我在那里添加的任何内容似乎都没有得到应用。甚至 …