Component with script

I have

template

...
<dom-module id="main-layout">
  <template>
    <style>
      .offline[hidden]
 {
        display: none !important;
      }
    </style>

    <iron-ajax auto url="offline-page.html" handle-as="document" last-response="{{offlinePage}}"></iron-ajax>

    <slot></slot>

    <div id="offline" class="offline" hidden$="[[online]
]">
    </div>
  </template>

  <script>
    class MainLayout extends Polymer.Element {
      static get is() {
        return 'main-layout';
      }

      static get observers() {
        return ['_offlinePageChanged(offlinePage)']
;
      }

      // Reusing offline-page.html content in order not to duplicate.
      // The page is requested using iron-ajax.
      _offlinePageChanged(doc) {
        if (doc) {
          this.$.offline.appendChild(doc.querySelector('style'));
          this.$.offline.appendChild(doc.querySelector('.content'));
        }
      }

      ready() {
        super.ready();

        //   This might be provided by flow in the future (#3778)
        this.online = window.navigator.onLine;
        window.addEventListener('online', e => this.online = true);
        window.addEventListener('offline', e => this.online = false);
      }
    }

    window.customElements.define(MainLayout.is, MainLayout);
  </script>
</dom-module>
Java class
@Theme(Lumo.class)
@Tag("main-layout")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@HtmlImport("styles/view/MainLayout.html")
public class MainLayout extends PolymerTemplate<TemplateModel> {}

All work fine

But I want use another component for example
public class MainLayout extends SomeComponent {}

How to make template work with scripts

You don’t use TemplateModel or @Id features, do you?
If so, you can just put the same annotations on the component and it should work without extending the PolymerTemplate class.

Kirill Bulatov:
You don’t use TemplateModel or @Id features, do you?
If so, you can just put the same annotations on the component and it should work without extending the PolymerTemplate class.

Thank you

Can you give me small example?

Java class
@Theme(Lumo.class)
@Tag("main-layout")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@HtmlImport("styles/view/MainLayout.html")
public class MainLayout extends SomeComponent {}

Don’t work =(

I guess I’ve misunderstood you then, can you elaborate what’s exactly not working?
Would be great to get a project code also.

Java class

@Slf4j
@Push
@Tag("main-layout")
@Theme(Lumo.class)
@HtmlImport("styles/view/MainLayout.html")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainLayout extends AppLayoutRouterLayout implements LocaleChangeObserver, BeforeEnterObserver {
...
}

Template

<link rel="import" href="../../bower_components/flag-icons/flag-icons.html">
<link rel="import" href="../../bower_components/d2l-icons/tier2-icons.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="main-layout">
  <template>
    <style>
      .offline[hidden]
 {
        display: none !important;
      }
    </style>

    <iron-ajax auto url="offline-page.html" handle-as="document" last-response="{{offlinePage}}"></iron-ajax>

    <slot></slot>

    <div id="offline" class="offline" hidden$="[[online]
]">
    </div>
  </template>

  <script>
    class MainLayout extends Polymer.Element {
      static get is() {
        return 'main-layout';
      }

      static get observers() {
        return ['_offlinePageChanged(offlinePage)']
;
      }

      // Reusing offline-page.html content in order not to duplicate.
      // The page is requested using iron-ajax.
      _offlinePageChanged(doc) {
        if (doc) {
          this.$.offline.appendChild(doc.querySelector('style'));
          this.$.offline.appendChild(doc.querySelector('.content'));
        }
      }

      ready() {
        super.ready();

        //   This might be provided by flow in the future (#3778)
        this.online = window.navigator.onLine;
        window.addEventListener('online', e => this.online = true);
        window.addEventListener('offline', e => this.online = false);
      }
    }

    window.customElements.define(MainLayout.is, MainLayout);
  </script>
</dom-module>

So I want add support offline

And if, in general, how to apply the Template to classes that are not inherited from PolymerTemplate, but from Component

PS Sorry for my English…

And if, in general, how to apply the Template to classes that are not inherited from PolymerTemplate, but from Component

There is no easy way to do that in general currently. If you feel that there should be one, please submit an issue here: https://github.com/vaadin/flow/issues

But before doing that, please consider other ways of interacting with web components, it might be that you don’t really need a PolymerTemplate at all.
The PolymerTemplate class is useful in two major cases:

  • when you want to use the TemplateModel features. Seems to be not your case since you haven’t defined your own model and used a standard empty one: PolymerTemplate<TemplateModel>
  • when you want to use the @Id and inject a template contents into the java code. Seems to be not your case also.

What you can do instead, is to make your template a proper standalone web component (so it can be used without any java code at all), usually all you need is to define a properties (https://www.polymer-project.org/2.0/docs/devguide/properties).
Then you can access those via Java code.

See this demo that shows 3 possible ways to use the same web component: https://github.com/vaadin/flow-demo/tree/master/demo-hello-worlds

Hope it helps.