How use custom-style or shared styles in polymer 3 preview

Question

I need to use common styles for app, but <custom-style> doesn't work. Attribute include in <style></style> doesn't work also. How do it?

Answer 1

EDIT: Alternative approach, use template literals.

I realized that there is, what I feel is a much better and more natural alternative now that template literals is being used.

In shared-styles.js:

import { html } from @polymer/polymer/polymer-element.js;

export const sharedStyles = html`
    <style>
        ... various styles here ...
    </style>
`;

Now in the custom element file you want to use it ( my-element.js ):

import { PolymerElement, html } from @polymer/polymer/polymer-element.js;
import { sharedStyles } from './shared-styles.js';

class MyElement extends PolymerElement {

    ... element code ...

        get template() {
            return html`
                ${sharedStyles}
                <style>
                    ... your element custom styles here ...
                </style>
            `;
        }

    ... rest of your element code ...

}

For me this makes far more sense because we are using native javascript and avoid any extra polyfills that may be required by the include="" functionality.

I also think this is a bit more future proof, since the include="" syntax isn't really in the spec and I don't expect it will be? (Can anyone correct me if I'm wrong on that?)

END (Alternative approach)

OLD Answer below

This has now been documented in the upgrade guide when 3.0 went live.

See the first section under "Less common upgrade tasks" on this page: https://www.polymer-project.org/3.0/docs/upgrade

Also, remember that you would need to import custom-style into the js module before it will work. Should be located here: polymer/lib/elements/custom-style.js