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

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

这绝不是特定于@Tag注释甚至是Vaadin，而是来自生态系统（例如extends Polymer.Element文件中的html.html ）。