CSS Änderungen spiegeln nicht in Polymer

ich ein Polymerelement in der Datei hallo-world.htmlCSS Änderungen spiegeln nicht in Polymer

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="hello-world"> 

    <template> 
     <style> 
      h1 
      { 
       color: green; 
       font-family: Arial; 
       text-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
      } 
     </style> 
     <h1>Hello World</h1> 
    </template> 

    <script> 
     Polymer ({ 
      is: "hello-world", 
     }); 
    </script> 

</dom-module>

Die Datei erstellt haben, die hallo-world.html zugreift namens index.html

<!DOCTYPE html> 

<html> 
    <head> 
     <script src="bower_components/webcomponentsjs/webcomponents.js"></script> 

     <link rel="import" href="elements/hello-world.html"> 

     <style> 
      h1 
      { 
       color: red; 
      } 
     </style> 
    </head> 

    <body> 
     <hello-world></hello-world> 
     <h1>Hello Arijit</h1> 
    </body> 
</html>

Allerdings, wenn ich ändern die CSS-Eigenschaften in hallo-world.html und ich auffrischen index.html in lokalen Host, die Änderungen spiegeln nicht wider. Gibt es etwas, was ich verpasse?

Quelle

2016-04-10 Arijit Goswami

Polymerelemente verwenden eine Stilverkapselung, um zu verhindern, dass Stile in Elemente hinein- und herausgelöst werden. Bei aktiviertem Full-Shadow-DOM ist dies eine Browser-Funktion, im schattigen DOM (Standard) ist dies eine Polymer-Funktion.

Weitere Details finden https://www.polymer-project.org/1.0/docs/devguide/styling.html

Dies sollte das tun, was Sie wollen:

<dom-module id="hello-world"> 

    <template> 
     <style> 
      h1 
      { 
       color: var(--hello-world-color, green); 
       font-family: Arial; 
       text-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
      } 
     </style> 
     <h1>Hello World</h1> 
    </template> 

    <script> 
     Polymer ({ 
      is: "hello-world", 
     }); 
    </script> 

</dom-module>

<!DOCTYPE html> 

<html> 
    <head> 
     <script src="bower_components/webcomponentsjs/webcomponents.js"></script> 

     <link rel="import" href="elements/hello-world.html"> 

     <style is="custom-style"> 
      :root 
      { 
       --hello-world-color: red; 
      } 
     </style> 
    </head> 

    <body> 
     <hello-world></hello-world> 
     <h1>Hello Arijit</h1> 
    </body> 
</html>

Quelle

2016-04-10 10:38:58

CSS Änderungen spiegeln nicht in Polymer

Antwort

Verwandte Themen