Polymer to lit element migration

[Suvarnnan Vasudev]

Hi,

        I have following code  snippet in polymer .This code uses shared-styles .This internally has implementation as below . 

       Polymer element

class SHButton extends PolymerElement {

  static get template() {

    return html`

    <!--CSS-->

    <style include="shared-styles">

      :host {

        display: inline-flex;

                                                                                 ...............} 

Shared-styes.js

import './global-styles.js';

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<dom-module id="shared-styles">

  <template>

    <style>.....

In lit element ,this method of styling is not there .How I can map style of this polymer element in new migrated Lit element ? 

      

[Justin Fagnani]

Are you migrating one element at a time, or a whole app?

The best way to do style sharing with LitElement is to use static styles:

share-styles.js:

export const sharedStyles = css`

  h1 { color: blue; }

`;

element.js:

import {sharedStyles} from './shared-styles.js';

export class MyElement extends LitElement {

  static get styles() {

    return [sharedStyles, css`

      :host {

        display: inline-flex;

      }

    `];

  }

}

If you're migrating incrementally and need to use Polymer shared styles, I think you'll need to use the DomModule class to find the style sheet. I can look up some code for you if this is the case.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/787ab651-4a3a-4816-8734-c571d13f8911%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.