Search code examples
vaadinvaadin10

Vaadin @Tag annotation

I have a question with vaadin @Tag annotation. When i use in my component like this @Tag("main-page") Edge and FF getting unexpected class names.

@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>,

And result on FF and Edge:

Unexpected class name

But in chrome, safari, opera:

Its good

Any explanation ? What did i do wrong ?

Solution

  • What you see happens because current versions of Edge and Firefox do not natively support Shadow DOM. You can see this by the absence of the special #shadow-root node in the DOM tree.

    Instead of native support, Vaadin is using a polyfill that emulates most parts of the functionality. This polyfill still has some visible side effects, such as some additional CSS classes that are used for emulating the style encapsulation functionality.

    This is in no way specific to the @Tag annotation or even Vaadin in general, but rather something that comes from the ecosystem (e.g. extends Polymer.Element that you would have in your home.html file).