Is it possible to upgrade polymer 3 partially?

I'm trying to upgrade my application from polymer 2 to polymer 3. I tried thru modulizer but application got broken. It is big size application, so I'm planning to upgrade elements one by one. Is it possible to upgrade some part of application(elements) to polymer 3.

I converted one of my application element as per polymer 3 syntax and then tried to import that into another element like below but it is not working.

See the below sample example,

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

import '@polymer/polymer/lib/elements/dom-if.js';

import '@polymer/paper-checkbox/';

import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings';



class StartPolymer3 extends PolymerElement {

  static get properties () {

    return {

      message: {

        type: String,

        value: ''

      },

    };

  }



  constructor() {

    super();

  }



  ready(){

    super.ready();

  }



  static get template () {

    return html`

      <style>

        paper-checkbox {

          --paper-checkbox-checked-ink-color: #FFFFFF;

          --paper-checkbox-unchecked-ink-color: #FFFFFF;

        }

      </style>

      <h1>Start Polymer 3.0</h1>

      <p>[[message]]</p>

      <paper-checkbox id="omgpie">I like pie.</paper-checkbox>

    `;

  }

}



customElements.define('start-polymer3', StartPolymer3);

Here StartPolymer3 element converted as polymer 3 element, now I should I use this inside another element which is wrote in polymer 2. I tried like below inside polymer2 element but its not working.

 <script type="module">

   import { StartPolymer3 } from '../views/start-polymer3.js';

</script>



<start-polymer3 message="testHello"></start-polymer3>

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

add a comment |

I converted one of my application element as per polymer 3 syntax and then tried to import that into another element like below but it is not working.

See the below sample example,

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

import '@polymer/polymer/lib/elements/dom-if.js';

import '@polymer/paper-checkbox/';

import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings';



class StartPolymer3 extends PolymerElement {

  static get properties () {

    return {

      message: {

        type: String,

        value: ''

      },

    };

  }



  constructor() {

    super();

  }



  ready(){

    super.ready();

  }



  static get template () {

    return html`

      <style>

        paper-checkbox {

          --paper-checkbox-checked-ink-color: #FFFFFF;

          --paper-checkbox-unchecked-ink-color: #FFFFFF;

        }

      </style>

      <h1>Start Polymer 3.0</h1>

      <p>[[message]]</p>

      <paper-checkbox id="omgpie">I like pie.</paper-checkbox>

    `;

  }

}



customElements.define('start-polymer3', StartPolymer3);

Here StartPolymer3 element converted as polymer 3 element, now I should I use this inside another element which is wrote in polymer 2. I tried like below inside polymer2 element but its not working.

 <script type="module">

   import { StartPolymer3 } from '../views/start-polymer3.js';

</script>



<start-polymer3 message="testHello"></start-polymer3>

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

add a comment |

I converted one of my application element as per polymer 3 syntax and then tried to import that into another element like below but it is not working.

See the below sample example,

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

import '@polymer/polymer/lib/elements/dom-if.js';

import '@polymer/paper-checkbox/';

import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings';



class StartPolymer3 extends PolymerElement {

  static get properties () {

    return {

      message: {

        type: String,

        value: ''

      },

    };

  }



  constructor() {

    super();

  }



  ready(){

    super.ready();

  }



  static get template () {

    return html`

      <style>

        paper-checkbox {

          --paper-checkbox-checked-ink-color: #FFFFFF;

          --paper-checkbox-unchecked-ink-color: #FFFFFF;

        }

      </style>

      <h1>Start Polymer 3.0</h1>

      <p>[[message]]</p>

      <paper-checkbox id="omgpie">I like pie.</paper-checkbox>

    `;

  }

}



customElements.define('start-polymer3', StartPolymer3);

Here StartPolymer3 element converted as polymer 3 element, now I should I use this inside another element which is wrote in polymer 2. I tried like below inside polymer2 element but its not working.

 <script type="module">

   import { StartPolymer3 } from '../views/start-polymer3.js';

</script>



<start-polymer3 message="testHello"></start-polymer3>

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

I converted one of my application element as per polymer 3 syntax and then tried to import that into another element like below but it is not working.

See the below sample example,

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

import '@polymer/polymer/lib/elements/dom-if.js';

import '@polymer/paper-checkbox/';

import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings';



class StartPolymer3 extends PolymerElement {

  static get properties () {

    return {

      message: {

        type: String,

        value: ''

      },

    };

  }



  constructor() {

    super();

  }



  ready(){

    super.ready();

  }



  static get template () {

    return html`

      <style>

        paper-checkbox {

          --paper-checkbox-checked-ink-color: #FFFFFF;

          --paper-checkbox-unchecked-ink-color: #FFFFFF;

        }

      </style>

      <h1>Start Polymer 3.0</h1>

      <p>[[message]]</p>

      <paper-checkbox id="omgpie">I like pie.</paper-checkbox>

    `;

  }

}



customElements.define('start-polymer3', StartPolymer3);

Here StartPolymer3 element converted as polymer 3 element, now I should I use this inside another element which is wrote in polymer 2. I tried like below inside polymer2 element but its not working.

 <script type="module">

   import { StartPolymer3 } from '../views/start-polymer3.js';

</script>



<start-polymer3 message="testHello"></start-polymer3>

polymer polymer-1.0 polymer-2.x polymer-3.x

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

edited Dec 28 '18 at 6:29

A.H.Nuri

735510

asked Dec 28 '18 at 5:41

Munna

5461927

asked Dec 28 '18 at 5:41

Munna

5461927

asked Dec 28 '18 at 5:41

Munna

5461927

add a comment |

1 Answer
1

active

oldest

votes

The Polymer 3.0 API is almost 100% backward compatible with Polymer 2.x—the only changes are removing APIs related to HTML Imports (such as importHref), and converting Polymer's API to be module-based rather than globals-based.
Here related link

answered Dec 28 '18 at 15:08

HakanC

1,9693713

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53954137%2fis-it-possible-to-upgrade-polymer-3-partially%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

answered Dec 28 '18 at 15:08

HakanC

1,9693713

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

add a comment |

answered Dec 28 '18 at 15:08

HakanC

1,9693713

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

add a comment |

answered Dec 28 '18 at 15:08

HakanC

1,9693713

answered Dec 28 '18 at 15:08

HakanC

1,9693713

answered Dec 28 '18 at 15:08

HakanC

1,9693713

answered Dec 28 '18 at 15:08

HakanC

1,9693713

answered Dec 28 '18 at 15:08

HakanC

1,9693713

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

add a comment |

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

i am getting below errors on imports Relative references must start with either "/", "./", or "../" i am not using polymer serve to complie instead we use run application node index.htmlis it possible to fix this issue without using polymer serve/build
– Munna
19 hours ago

I am not sure but you may set a base path of app adding into index.html something like: ` <base href="./">`
– HakanC
18 hours ago

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk