vaadin - Vaadin @Tag 注解

Question

我对 vaadin @Tag注释有疑问。当我在这样的组件中使用@Tag("main-page") Edge 和 FF 时，会得到意外的类名。

@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。#shadow-root您可以通过DOM 树中没有特殊节点来看到这一点。

Vaadin 没有使用原生支持，而是使用模拟大部分功能的 polyfill。这个 polyfill 仍然有一些可见的副作用，例如一些用于模拟样式封装功能的附加 CSS 类。

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