标签: lit-element

我正在为我的应用程序使用 @polymer/lit-element。最近我这样做npm install 导致了以下错误

"npm WARN deprecated @polymer/lit-element@0.5.2: @polymer/lit-element has moved to lit-element. Please uninstall this package and install lit-element. See https://www.polymer-project.org/blog/2019-01-11-lit-element-rc".

当我检查我的 node_modules 时，lit-element 文件夹已从 @polymer 文件夹中删除。有什么办法可以找回我的 @polymer/lit-element？（除了我必须将整个应用程序迁移到 lit-element 这听起来很乏味）

我正在尝试在应用程序中使用自定义元素，但是在升级到当前版本的lit-element后，我似乎找不到_didRender的替换功能。我尝试了firstUpdated和connectedCallback没有成功。我该怎么办。代码呈现，但是在呈现和修改ajax调用后，我希望呈现器会更新，但它不会

import {LitElement, html} from 'lit-element';
import '@material/mwc-formfield/mwc-formfield.js';
import '@material/mwc-checkbox/mwc-checkbox.js'
import '@polymer/iron-ajax/iron-ajax.js';

class FhirActiveStatus extends LitElement{
    static get properties() {
        return {
            /**activeStatus is used to show active status of person true or false. Use this property to show/hide. Default: true */
            activeStatus: {type:Boolean},
            /**url is used to make AJAX call to FHIR resource. Default: null */
            url: {type:String},
            /**value is used to take the input value of each field*/
            value: {type:Boolean}
        }
    } …

我有两个 Lit 元素 Web 组件 - 一个是units-list，其中包含许多units-list-item元素。这些units-list-item元素有两种不同的显示模式：紧凑和详细。因为列表元素支持无限滚动（因此可能包含数千个单位），我们需要任何在两种模式之间切换的机制来尽可能提高性能。

这就是为什么我认为一个理想的解决方案是:host-context()在units-list-item元素的样式中使用伪选择器，因为这样每个units-list-item元素都可以通过更改应用于祖先的类（这将在阴影内）在两种显示模式之间切换units-list元素的DOM ）。

详细说明，这里是units-list元素的相关标记。请注意，“触发器”类正在应用于#list-contentsdiv，它是units-list模板的一部分。

<div id="list-contents" class="${showDetails ? 'detail-view table' : 'compact-view table'}">
    ${units.map(unit => html`<units-list-item .unit="${unit}"></units-list-item>`)}
</div>

如您所见，该showDetails标志控制是将“detail-view”还是“compact-view”类应用于包含所有units-list-item元素的 div 。这些类肯定被正确应用。

这是units-list-item元素的完整渲染方法（删除了不必要的标记）：

render() {
    const {unit} = this;
    // the style token below injects the processed stylesheet contents into the template
    return html`
        ${style}
        <div class="row compact">
            <!-- …

在使用 Lit-Element 和 Typescript 构建 WebComponent 时，我收到了这个相当神秘的错误消息。

当我尝试将checked属性设置为元素时发生错误。

罪魁祸首是类似的东西：

    return html`<input type="radio" ${(testValue==0 ? "checked":"")}>`

错误信息是

TypeError: Failed to set the 'currentNode' property on 'TreeWalker': The provided value is not of type 'Node'.

在父组件中我有类似的内容：

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data=${data}></child-component>`
}

这基本上相当于：

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data="[object Object]"></child-component>`
}

基本上没什么用...

有没有一种简单的方法将复杂的对象层次结构传递到 litElement 组件中？

据我所知，我的选择是：

选项 1.使用属性：我是一个 litElement 菜鸟，所以我不确定这是否有效，并且我不确定如何使其工作而无需进行额外的函数调用。如果我能在里面做所有必要的工作就好了html。

研究正在进行中。

选项 2.使用 Json。

将父组件中的对象字符串化

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version …

我有带有 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;
}