Fix stylable mixin example

Attach shadow root in the constructor, not every time in the connected callback
rolfsmeds · Sep 10, 2018 · c7fdd9c · c7fdd9c
1 parent 953ec59
commit c7fdd9c
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/docs/stylable-mixin.md b/docs/stylable-mixin.md
@@ -87,11 +87,15 @@ To make a component “stylable”, extend it with the mixin, and call `super.co
 ```javascript
 import { StylableMixin } from './node_modules/j-elements/src/stylable-mixin.js';
 
-class JCard extends StylableMixin(HTMLElement) {
-  connectedCallback() {
-    // You need to call StylableMixin.connectedCallback to have style modules applied
+class XStylable extends StylableMixin(HTMLElement) {
+  constructor() {
+    super();
     // NOTE: your element needs to have a shadow root before StylableMixin is invoked
     this.attachShadow({mode: 'open'});
+  }
+
+  connectedCallback() {
+    // Call super.connectedCallback() to have style modules applied
     super.connectedCallback();
   }
 }