diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
index 1cb75653..c079ae53 100644
--- a/demo/app/app.module.ts
+++ b/demo/app/app.module.ts
@@ -9,7 +9,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { SlateModule } from 'slate-angular';
 import { DemoElementImageComponent } from './components/image/image-component';
-import { DemoMarkTextComponent } from './components/text/text.component';
+import { DemoTextMarkComponent } from './components/text/text.component';
 import { DemoButtonComponent } from './components/button/button.component';
 import { DemoTablesComponent } from './tables/tables.component';
 import { DemoImagesComponent } from './images/images.component';
@@ -26,7 +26,7 @@ import { DemoReadonlyComponent } from './readonly/readonly.component';
         DemoMarkdownShortcutsComponent,
         DemoHugeDocumentComponent,
         DemoElementImageComponent,
-        DemoMarkTextComponent,
+        DemoTextMarkComponent,
         DemoTablesComponent,
         DemoTablesComponent,
         DemoImagesComponent,
@@ -43,7 +43,7 @@ import { DemoReadonlyComponent } from './readonly/readonly.component';
         SlateModule,
     ],
     entryComponents: [
-        DemoMarkTextComponent,
+        DemoTextMarkComponent,
         DemoElementImageComponent,
         DemoLeafComponent,
     ],
diff --git a/demo/app/components/text/text.component.ts b/demo/app/components/text/text.component.ts
index b6fa8991..ef9ff025 100644
--- a/demo/app/components/text/text.component.ts
+++ b/demo/app/components/text/text.component.ts
@@ -10,13 +10,13 @@ export enum MarkTypes {
 }
 
 @Component({
-    selector: 'span[markText]',
+    selector: 'span[textMark]',
     template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`,
     host: {
         'data-slate-node': 'text'
     }
 })
-export class DemoMarkTextComponent extends BaseTextComponent {
+export class DemoTextMarkComponent extends BaseTextComponent {
     attributes = [];
 
     constructor(public elementRef: ElementRef, public renderer2: Renderer2, cdr: ChangeDetectorRef) {
@@ -29,7 +29,7 @@ export class DemoMarkTextComponent extends BaseTextComponent {
         });
         this.attributes = [];
         for (const key in this.text) {
-            if (Object.prototype.hasOwnProperty.call(this.text, key) && !!this.text[key]) {
+            if (Object.prototype.hasOwnProperty.call(this.text, key) && key !== 'text' && !!this.text[key]) {
                 const attr = `slate-${key}`;
                 this.renderer2.setAttribute(this.elementRef.nativeElement, attr, 'true');
                 this.attributes.push(attr);
diff --git a/demo/app/richtext/richtext.component.ts b/demo/app/richtext/richtext.component.ts
index cdd8ffb4..9d6ef6d2 100644
--- a/demo/app/richtext/richtext.component.ts
+++ b/demo/app/richtext/richtext.component.ts
@@ -2,7 +2,7 @@ import { Component, ViewChild, TemplateRef, OnInit } from '@angular/core';
 import { createEditor, Text, Editor, Element, Transforms } from 'slate';
 import { withHistory } from 'slate-history';
 import { withAngular } from 'slate-angular';
-import { DemoMarkTextComponent, MarkTypes } from '../components/text/text.component';
+import { DemoTextMarkComponent, MarkTypes } from '../components/text/text.component';
 import isHotkey from 'is-hotkey';
 
 const SLATE_DEV_MODE_KEY = 'slate-dev';
@@ -186,7 +186,7 @@ export class DemoRichtextComponent implements OnInit {
 
     renderText = (text: Text) => {
         if (text[MarkTypes.bold] || text[MarkTypes.italic] || text[MarkTypes.code] || text[MarkTypes.underline]) {
-            return DemoMarkTextComponent;
+            return DemoTextMarkComponent;
         }
     }
 
diff --git a/demo/app/search-highlighting/search-highlighting.component.ts b/demo/app/search-highlighting/search-highlighting.component.ts
index 0da29956..724155cf 100644
--- a/demo/app/search-highlighting/search-highlighting.component.ts
+++ b/demo/app/search-highlighting/search-highlighting.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { createEditor, NodeEntry, Text } from 'slate';
 import { withAngular } from 'slate-angular';
-import { DemoMarkTextComponent, MarkTypes } from '../components/text/text.component';
+import { DemoTextMarkComponent, MarkTypes } from '../components/text/text.component';
 import { DemoLeafComponent } from './leaf.component';
 
 @Component({
@@ -57,7 +57,7 @@ export class DemoSearchHighlightingComponent implements OnInit {
 
     renderText = (text: Text) => {
         if (text[MarkTypes.bold] || text[MarkTypes.italic] || text[MarkTypes.code] || text[MarkTypes.underline]) {
-            return DemoMarkTextComponent;
+            return DemoTextMarkComponent;
         }
     }
 
diff --git a/demo/app/tables/tables.component.ts b/demo/app/tables/tables.component.ts
index cab4a9e9..fa13f244 100644
--- a/demo/app/tables/tables.component.ts
+++ b/demo/app/tables/tables.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { createEditor, Editor, Text, Element, Node } from 'slate';
 import { AngularEditor, DOMElement, withAngular } from 'slate-angular';
-import { MarkTypes, DemoMarkTextComponent } from '../components/text/text.component';
+import { MarkTypes, DemoTextMarkComponent } from '../components/text/text.component';
 import { withBlockCard } from '../plugins/block-cards.plugin';
 
 @Component({
@@ -41,7 +41,7 @@ export class DemoTablesComponent implements OnInit {
 
   renderText = (text: Text) => {
     if (text[MarkTypes.bold] || text[MarkTypes.italic] || text[MarkTypes.code] || text[MarkTypes.underline]) {
-      return DemoMarkTextComponent;
+      return DemoTextMarkComponent;
     }
   }