CODEWITHSUNDEEP
polymerpolymer-1.0
Jose Raul Perera
Jose Raul Perera

Reputation: 878

Issue with polymer theme

I created a new polymer app using AppToolbox (polymer cli) and now I'm trying to add a theme that I download from Polymer Theme. I follow the instructions: Add the following line inside your tag AFTER the webcomponents-lite.min.js and other HTML imports.

<link rel="import" href="path/to/theme.html">

To use the theme within your custom element, add the following line inside your tag:

<link rel="import" href="path/to/theme.css" type="css">

Of course I removed some css styles in the example components but I don't see the template applied to the project.

Could anyone give me some advice about this?

Instructions: Instructions Pic

Upvotes: 0

Views: 150

Answers (1)

tony19
tony19

Reputation: 138696

TL;DR The only method that seems to allow those themes to work properly with Polymer 1.5.0 is to link the provided stylesheet in index.html with:

<link rel="stylesheet" href="path/to/theme.css">

plunker

The instructions from https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of style modules.

However, even style modules don't allow full theming in my experiments.

Trials:

  • Importing the provided theme in the <dom-module> (deprecated):

    <dom-module id="x-button">
  <link rel="import" type="css" href="theme.css"> <!-- partial styling -->
  ...
</dom-module>

    Result: Styles are restricted to the custom element, but no font styling. plunker

    enter image description here

  • Converting the provided theme into a style module, and including it in the <dom-module>:

    <link rel="import" href="theme.html">
<dom-module id="x-button">
  <style is="custom-style" include="theme"></style>  <!-- partial styling -->
  ...
</dom-module>

    Result: (same effect as Trial 1) plunker

    enter image description here

  • Linking the provided stylesheet in <dom-module>:

    <dom-module id="x-button">
  <link rel="stylesheet" href="theme.css">  <!-- full styling, leaks -->
  ...
</dom-module>

    Result: x-button fully styled as intended, but styles leak into main page, modifying the background color and a paper-button of the main page. plunker

    enter image description here

  • Linking the provided stylesheet only in index.html:

    <head>
  <link rel="stylesheet" href="theme.css">  <!-- full styling -->
  ...
</head>
<body>
  <x-button></x-button>
</body>

    Result: x-button fully styled as intended. plunker

    enter image description here

Upvotes: 1

Related Questions