diff --git a/src/app.ts b/src/app.ts
index 9f5daaf99..c567d2bd2 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,10 +1,26 @@
-import {Component} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Renderer} from 'angular2/angular2';
+
+
+@Directive({
+  selector: '[x-large]'
+})
+class XLarge {
+  constructor(element: ElementRef, renderer: Renderer) {
+    // we must interact with the dom through Renderer for webworker/server to see the changes
+    renderer.setElementStyle(element, 'fontSize', 'x-large');
+  }
+}
+
 
 @Component({
   selector: 'app',
+  directives: [ XLarge ],
   template: `
   <div>
-    <h1>Hello, {{ name }}!</h1>
+    <div>
+      <span x-large>Hello, {{ name }}!</span>
+    </div>
+
     name: <input type="text" [value]="name" (input)="name = $event.target.value" autofocus>
   </div>
   `