发表新帖
发表新帖

Polymer @import theme file with :host in styles has no affect

后端 未结
关注
2 1495
感情败类
感情败类 2020-12-19 22:46

Back with another Polymer question, I have a Polymer/Electron app that I\'m trying to style.

I want to create a theme.css that contains a :host

相关标签:
2条回答
  • 误落风尘
    2020-12-19 22:58

    Using dom-module concept, and in order to use a external third party I did the next and it is working, but probably is not a Polymer best practice.

    Dom module with 3rd party css (third-party-styles.html)

    <dom-module id="third-party-styles">
    <link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>

    I created a container (elements.html) where import all needed html modules, and there I registered the third party style module and my module

    <link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">

    And I added the elements.html in the head of my index.html

    <head>
    ...
    <link rel="import" href="elements.html">
<head>
<body>
    <my-module></my-module>
</body>

    In my Polymer Element (my-module.html)

    <link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
    <style include="third-party-styles"></style>
    <template>
        <p class=".thirdPartyClass">Content with third party css rule</p>
    </template>
</dom-module>

    any feedback?

    0 讨论(0)
  • 执念已碎
    2020-12-19 23:17

    There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).

    Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.

    <!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

    Then obviously you need to import this file in your page. 

    <link rel="import" href="shared-styles.html">

    Now, there are two scenarios.

    1. If you are using custom-style at the document level, you need to include the style module you previously defined like this -

      <style is="custom-style" include="shared-styles"></style>

    2. If you simply want to include the style module inside one of your elements, do this -

      <dom-module id="my-element"> <style include="shared-styles"></style>

    Have a look at this plunker that demonstrates both scenarios.

    Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.

    0 讨论(0)
 看不清?
提交回复
热议问题