dynamische Klassen auf Polymer 1.0 Elemente

Question

Ich habe diese Komponente erstellt, um meine Frage zu demonstrieren. Diese Komponente funktioniert wie erwartet in Chrome und Firefox. Aber wenn ich this.$.wrapper.setAttribute('class','blue'); anstelle von this.$.wrapper.setAttribute('class','blue style-scope poly-test'); schreibe, hört es auf, in firefox zu arbeiten.

Ist dies der bevorzugte Weg, um Klassen auf Shadow-DOM-Elemente in einem Event-Handler zu ändern, oder mache ich etwas versehentlich richtig, das in einer zukünftigen Version brechen könnte?

Auch, warum muss ich style-scope und meinen Elementnamen als eine Klasse manuell für Firefox angeben?

<link rel="import" href="../js/bower_components/polymer/polymer.html"> 
<dom-module id="poly-test"> 
    <style> 
    .blue { border: 10px solid blue; } 
    .red { border: 10px solid red; } 
    #wrapper { font-weight: bold; font-size: 42px; } 
    </style> 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: {'blue': { type: 'Boolean', value: false }}, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.blue = !this.blue; 
     if (this.blue) { 
     this.$.wrapper.setAttribute('class','blue style-scope poly-test'); 
     } else { 
     this.$.wrapper.setAttribute('class','red style-scope poly-test'); 
     } 
     this.updateStyles(); 
    } 
    }); 
</script> 

Answer 1

Die Idee von Web-Komponenten ist das Web als deklarative wie möglich zu machen. In diesem Sinne sollte

deklarativen Ansatz der Polymer-Wege dynamische Klassen der Umsetzung: von Rahmen (https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding)

... 
<dom-module id="poly-test"> 
    ... 
    <template> 
    <!-- handle dynamic classes declaratively --> 
    <div class$="{{computeClass(isBlue)}}"> 
     <content></content> 
    </div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: { 
     'isBlue': { type: Boolean, value: false } 
    }, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.isBlue = !this.isBlue; 
    }, 
    computeClass: function (f) { 
     return f ? "blue" : "red"; 
    } 
    }); 
</script> 

style-scope wird verwendet, wenn Elemente und Stanzen Knoten in DOM Upgrade (unter schattigen Verhalten, glaube ich), und ich denke nicht, dass wir dazu bestimmt sind, es zu berühren.

Wenn Sie wirklich zwingend behandeln möchten, empfehle ich die Polymer API API toggleClass() Methode.

Imperative Ansatz: (http://polymer.github.io/polymer/)

... 
<dom-module id="poly-test"> 
    ... 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: { 
     'isBlue': { type: Boolean, value: false } 
    }, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.isBlue = !this.isBlue; 
     this.toggleClass("blue", this.isBlue, this.$.wrapper); 
     this.toggleClass("red", !this.isBlue, this.$.wrapper); 
    } 
    }); 
</script> 

Answer 2

Verwenden Sie die classList Festigkeitsklassen verwalten:

<link rel="import" href="../js/bower_components/polymer/polymer.html"> 
<dom-module id="poly-test"> 
    <style> 
    .blue { border: 10px solid blue; } 
    .red { border: 10px solid red; } 
    #wrapper { font-weight: bold; font-size: 42px; } 
    </style> 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: {'blue': { type: 'Boolean', value: false }}, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.blue = !this.blue; 
     this.$.wrapper.classList.toggle('blue', this.blue); 
     this.$.wrapper.classList.toggle('red', !this.blue) 
    } 
    }); 
</script> 

Mehr Informationen über classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList