Vaadin @Tag 注解

Question

我对 vaadin @Tag 注释有疑问。当我在我的组件中使用这样的 @Tag("main-page") Edge 和 FF 得到意想不到的 class 名称。

@Tag("main-page")
@HtmlImport("src/page/home.html")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no")
public class HomeView extends PolymerTemplate<HomeView.Model> implements RouterLayout, HasUrlParameter<String>,

FF 和 Edge 上的结果：

但在 chrome、safari、opera 中：

有什么解释吗？我做错了什么？

Answer 1

您看到的是因为当前版本的 Edge 和 Firefox 本身不支持 Shadow DOM。您可以通过 DOM 树中缺少特殊的 #shadow-root 节点来看到这一点。

Vaadin 使用的不是本机支持，而是使用模拟大部分功能的 polyfill。这个 polyfill 仍然有一些可见的副作用，例如一些额外的 CSS 类用于模拟样式封装功能。

这绝不是特定于 @Tag 注释甚至一般的 Vaadin，而是来自生态系统的东西（例如 extends Polymer.Element，您将在 home.html 文件）。

Vaadin @Tag 注解

Vaadin @Tag annotation

vaadin

vaadin10