stenciljs删除主题参数

Question

Stencil.js自动删除theme参数。

这段代码

<div>
  <vaadin-button theme="primary">Login</vaadin-button>
</div>

转换为

<div>
  <vaadin-button tabindex="0" role="button">Login</vaadin-button>
</div>

示例https://webcomponents.dev/edit/aJViPAjm35yATrrylWk1

Answer 1

下面是用来找出哪一个更改了DOM属性的测试代码。

import { h, Component, Prop } from "@stencil/core";
//commented deliberately
//import "@vaadin/vaadin-button/vaadin-button";

<!-- OUTPUT -->
<custom-element name="you">
    <vaadin-button part="vaadin-login-submit" theme="primary contained">
      Submit
    </vaadin-button>
</custom-element>

正如我们从上面看到的，模板JS本身并不操作您的vaadin-button DOM属性。

我假设@vaadin/vaadin-button库与模板JS冲突。

更新

看起来模板JS在使用web组件库方面有一些问题。

https://github.com/ionic-team/stencil/issues/529

https://github.com/ionic-team/stencil/issues/1095

旁路它看起来不好，但它是有效的。

import { Component, h, Element} from '@stencil/core';
import "@vaadin/vaadin-button/vaadin-button";

@Component({
  tag: 'app-root',
  shadow: false
})

export class AppRoot {

  @Element() private element: HTMLElement;

  componentDidLoad(){
    [].forEach.call(this.element.querySelectorAll('vaadin-button'), (dom) => {
      dom.setAttribute('theme','primary contained')
    }); 
  }

  render() {
    return (
          <vaadin-button theme="primary contained">FROM ROOT</vaadin-button>
    );
  }
}