Abstract out the styling so it can be applied separately from registration.

This is needed if, for example, the DOM structure is regenerated, and we want to set back the styles.

Author: jasongrout

packages/base/src/widget_style.ts

@@ -41,6 +41,9 @@ class StyleView extends WidgetView {
         for (let key of Object.keys(ModelType.styleProperties)) {
             this.registerTrait(key)
         }
+
+        // Set the initial styles
+        this.style();
     }
 
     /**
@@ -54,9 +57,6 @@ class StyleView extends WidgetView {
         this.listenTo(this.model, 'change:' + trait, (model, value) => {
             this.handleChange(trait, value);
         });
-
-        // Set the initial value on display.
-        this.handleChange(trait, this.model.get(trait));
     }
 
     /**
@@ -85,6 +85,15 @@ class StyleView extends WidgetView {
         }
     }
 
+    /**
+     * Apply styles for all registered traits
+     */
+    style() {
+        for (let trait of this._traitNames) {
+            this.handleChange(trait, this.model.get(trait));
+        }
+     }
+
     /**
      * Remove the styling from the parent view.
      */