我正在处理的特定元素有问题。 并且由于某种原因,该选项不允许我在html标记上指定任何属性值。

如果我在构造器中指定默认值,则该元素可以很好地使用这些默认值,但是我无法通过声明性html覆盖默认值。

这是元素:

class OstinatoFetchTriggers extends LitElement {
  static get properties() {
    return {
      /**
        * The query selector for the `ostinato-fetch` element to use when
        * making the request.
        */
      xhrSelector: { type: String },

      /**
      * Elements with the trigger selector will have their click event
      * intercepted and will make the request via ostinato-fetch
      */
      triggerSelector: { type: String },
    };
  }


  constructor() {
    super();
    this.xhrSelector = '#xhrContent';
    this.triggerSelector = '[xhr-link]';
  }

  connectedCallback() {
    super.connectedCallback();

    // The output for console log below is null or whatever the default was in the contructor.
    console.log(this.triggerSelector);

    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.addEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    var triggerList = document.querySelectorAll(this.triggerSelector);
    triggerList.forEach((trigger) => {
      trigger.removeEventListener('click', this._handleXhrClick.bind(this));
    });
  }

  _handleXhrClick(ev) {
    ev.preventDefault();
    this.triggerRequest(ev.currentTarget.href);
  }

  triggerRequest(href) {
    document.querySelector(this.xhrSelector).fetch(href);
  }
}

customElements.define('ostinato-fetch-triggers', OstinatoFetchTriggers);

我尝试使用上述元素: <ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>

我期望的是元素中的xhrTriggers属性应该为#somethingElse ,但事实并非如此。 它基本上只使用构造函数中的默认值。

#1楼 票数:2 已采纳

首先:由于lit-element没有像在Polymer 2中那样通过将驼峰大小写转换为破折号来将属性名称映射为属性名称的概念,因此,如果声明xhrSelector ,则必须使用:

<ostinato-fetch-triggers xhrSelector="#somethingElse"></ostinato-fetch-triggers>

第二: connectedCallback是不是从lit-element发出的本机生命周期回调 ,这意味着无法保证何时调用lit-element已经设置了属性。 如果您希望每次更改属性时都做出反应,则可以使用firstUpdated(changedProperties)update(changedProperties)

查看更多有关轻元素生命周期的信息


第三:在disconnectedCallback ,您似乎想要删除侦听器,但这将不起作用,因为每次执行bind函数时,它将返回新函数,这意味着您尝试删除以前从未添加的函数。

您应该将监听器保持在某个变量中

let listener = this._handleXhrClick.bind(this)
trigger.addEventListener('click', listener)
this.listeners.push({ trigger, listener })

然后在disconnectedCallback

this.listeners.forEach(({ trigger, listener }) => {
  listener.removeEventListener('click', listener)
})

  ask by Andre translate from so

未解决问题?本站智能推荐:

1回复

如何通过解析index.html自定义元素中的值来设置/覆盖Lit-Element打字稿属性装饰器?

我试图覆盖lit-element中的set属性。 我正在使用Typescript,并且正在自定义元素中使用装饰器设置值,尽管当我尝试通过在index.html中设置其他属性来覆盖元素时,它不会覆盖... 当我console.log属性时,它只有在lit-element中设置的属性。 我
1回复

包大小:是否可以将lit-element设置为对等依赖项?

我注意到捆绑的js中添加了很多代码,用于基于简单的基于元素元素的Web组件,并且React组件将react设置为对等依赖项,因此仅捆绑了一个react运行时,因为Web组件与框架无关,如果我使用lit -element在我的项目中,并且我使用的是另一个由lit-element构建的外部WC,ligh
2回复

如何从lit-element中的开槽元素引用开槽元素?

我有一个名为'stack-item'的组件,该组件具有一个插槽,其html如下所示 我已经像这样使用了这个组件 我如何从“另一个组件”中获取class ='slot-style'的元素引用,以计算插槽宽度和其他属性? 我写了一个解决方法 但是有没有一种干净的方法来实现这一目标?
1回复

使用lit-element/lit-html进行国际化/本地化的最佳实践

谢谢你的阅读。 我是聚合物/ lit-element,lit-html的新手。 我已经开始使用PWA入门套件了。 令我惊讶的是,它没有使用聚合物元素,而是使用了lit-elements。 我尝试从https://polymer-library.polymer-project.org/
1回复

Lit-Element绑定到svg图像。TypeError:无法读取null的属性'split'

我一直在尝试将一个简单的url(字符串)绑定到svg元素中的图像标记。 但是我收到以下错误: TypeError: Cannot read property 'split' of null并且浏览器中没有显示图片。 图像以及绑定在正常的<img>标记内正常工作并且没有错误,或
1回复

lit-element:未捕获(承诺)TypeError:无法读取null的属性“previousSibling”

关于迁移到lit-element版本0.6.0 。 如果我用 在文档的header部分。 我有以下错误: 由于错误堆栈很大且涉及许多异步调用,因此我无法跟踪此错误的来源。 我也尝试重现一个最小的示例,但是同样,我无法模拟相同的错误消息。 此错误的结果是完全无法加载某些自定义元素(
2回复

Polymer/Lit元素,当父组件修改属性时,子组件不会重新渲染

活生生的例子基本上: 我将子组件放在父组件的 html 中。 子组件在static get properties()对象中有一个属性title 。 在父组件中,我将子组件的title属性分配给一个私有变量,该变量不在父组件的static get properties()中。 后来,在父组件内
3回复

如何在Polymer3的模板中嵌入html代码(如unsafeHTML)

请检查矮子 我希望将partHtml注入到类似于普通HTML的模板中。 我知道lit-element中不安全的HTML可以做到这一点,但是lit-element不能使用super.render()东西,它不像Polymer-element那样方便。