我有一个自定义组件，当我将布尔属性设置为 false 时，该组件应该隐藏内容。除该属性外，所有其他属性都会得到反映。我一定做错了什么。

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

如果我像<my-component></my-component>在 HTML 文件中一样使用该组件，它会显示：按预期默认。

如果我像这样使用它：<my-component title="New Title"></my-component>它会显示：按预期新标题。

但如果我尝试隐藏它，<my-component title-enable="false"></my-component>布尔值就不会改变。我已经尝试过 !title-enable、title-enable='false"、.titleEnable=false 以及您能想象到的所有变体。最让我生气的是，每当我在构造函数中设置 'this.titleEnable=false' 和我碰巧只是在标签上声明了没有值的变量，并将其视为 TRUE，出现“默认值”。<my-component title-enable></my-component>我完全迷失了。

我是 lit-element 的新手，当使用 import 来包含库时，我收到以下错误：

未捕获的类型错误：无法解析模块说明符“lit-element”。相对引用必须以“/”、“./”或“../”开头。

请提供任何替代方案/解决方案。

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

class MyElement extends LitElement {
  render(){
    return html`
      <div>
        <p>A paragraph</p>
      </div>
    `;
  }
}
customElements.define('my-element', MyElement);

我想通过 CDN 使用这个库。
https://www.jsdelivr.com/package/npm/lit-element

我的js代码在这里。

import { LitElement, html } from "https://cdn.jsdelivr.net/npm/lit-element@2.1.0/lit-element.js";

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

我收到以下错误。

未捕获的类型错误：无法解析模块说明符“lit-html”。相对引用必须以“/”、“./”或“../”开头。

我必须使用 npm 构建吗？

更新

以下代码有效。

import { LitElement, html } from "https://unpkg.com/lit-element/lit-element.js?module"

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

问题：有没有办法在不触发其render功能的情况下将属性更改传播到子元素？目前，当我更新父级中的属性时，switchViewModeHandler它会触发子级的重新渲染。

用例：将父级切换到“编辑”模式也应该为其所有子级切换相同的模式。

怀疑：我应该使用自定义事件吗？问题在于它将是一个复杂的嵌套元素网络，事件将变得难以快速调试（Polymer 已经遇到了这个问题）。

设置：父元素：

class ParentElement extends LitElement {
  @property() viewMode;

  constructor() {
    this.viewMode = ViewMode.editable;
  }

  static get properties() {
    return {
      viewMode: { type: String, reflect: true },
    };
  }

  private switchViewModeHandler(event: MouseEvent): void {
    this.viewMode =
      (this.viewMode === ViewMode.editing) ? ViewMode.editable : ViewMode.editing; // update my own edit mode
    const options: HTMLElement[] = (Array.from(this.children) as HTMLElement[]);
    options.forEach((item: HTMLElement) => {
      item.viewMode = this.viewMode;
    });
  }

  render() {
    return …

我想将 Lit-Element 与 Bootstrap 结合使用。

目前，我只是按照此处的建议导入了外部依赖项： https: //lit-element.polymer-project.org/guide/styles#external-stylesheet

有没有更好的方法来导入这些第三方依赖项？

这是我的组件：

import { LitElement, html, css } from "../../../third-party-libs/lit-element.js"

class LoginError extends LitElement {
  static get properties() { 
    return { 
      show: { type: Boolean, reflect: true }
    }
  }

  static get styles() {
    return css`
      div {
        color: red;
      }
      .hide-me {
        visibility: hidden
      }
    `;
  } 

  constructor() {
    super();
    this.show = false
  }

  render(){
    return html`
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
      <!-- jQuery first, then Popper.js, then …

如果存在应从数组呈现的列表，则该数组将从 Grand-grand-grand-grand-grand-parent 自定义元素传递。那会超级烦人。

是否有全局状态管理解决方案lit-element，就像redux？

我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中，我发现我们可以为高度添加 mixin。我尝试了几种方法，但没有成功。可能是我使用的语法错误。我想降低文本字段的高度。这是我的文本字段

<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>

和我的 css

 #textBox{
  text-transform: none;
   --mdc-theme-primary: transparent;
   --mdc-text-field-fill-color: #fff;
   --mdc-text-field-hover-line-color: #f5f5f5;
   --mwc-text-width: 100%;
   width:100%;
 }

应用的默认 css 是

:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
    background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
    background-color: rgb(245, 245, 245);
}
.mdc-text-field {
    display: flex;
    width: 100%;
}
.mdc-text-field {
    height: 56px;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    will-change: opacity, transform, color;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
}
.mdc-text-field {
    --mdc-ripple-fg-size:  0; …

我是赛普拉斯的新手。我的应用程序作为“路由系统”手动更改window.location.hash。在某些时候，我单击一个更改哈希值的按钮，因此应该在测试期间更改页面。我可以看到执行过程中出现一个“new url”条目，但是如何让 cypress 访问该 url？

简而言之，问题是什么：你可以看到我输入了密码，然后{enter}。运行测试我可以看到地址栏中的哈希值发生变化，但页面并没有根据哈希值变化而变化。

这是测试代码

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        //cy.wait(10000)
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"
    })
})

编辑：经过大量失败的尝试，我想出了一个部分有效、笨重且hacky的解决方案。我认为我不需要使用它reload()来解决这个问题（必须有更好的解决方案..），但为了使其正常工作，我必须等待所有远程请求完成（否则reload()取消它们）。我说部分工作是因为你可以从代码中的注释中看到，如果我尝试#login先访问，然后按照重定向#home，然后将页面更改为#browser，最后一个不起作用（我可以看到哈希更改为#browser，但是页面仍然是#home）。

import 'cypress-wait-until';

let i = 0;

context("Workflow", () => {
    it("login", () => {
        cy.server( {
            onRequest: () …

我一直在学习 Polymer 并且它进来了 - 网络的未来（lit-element和lit-html）

我知道lit-html是用于 HTML 模板的，它使用了一些有效的技术。同时lit-element是一个轻量级的 web 组件基类，里面有lit-html。

问题：如果lit-element与lit-html 一起提供，我将仅将lit-element用于我的所有目的。究竟是什么点燃-HTML有自己单独的上下文明确地这样做。

在开发独立的 Web 应用程序时应该选择lit-element还是lit-html？

任何有关指导的帮助都会有很大帮助！

谁能告诉我为什么我不能在 lit-html 的html方法中使用变量？

const h1 = 'h1';
return html`
  <${h1} class="a-heading ${classes}">
    <slot></slot>
  </${h1}>
`;

如果我替换${h1}为h1没有问题的作品。