diff --git a/.editorconfig b/.editorconfig
index a5e08f70..9cbe461c 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,27 +1,39 @@
-# This will be used as default EditorConfig for repos that don't have their own.
-# It's saved automatically as you type.
-# You can find docs at http://editorconfig.org
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=4
 
-root = true
+[{.babelrc,.stylelintrc,.eslintrc,jest.config,*.json,*.jsb3,*.jsb2,*.bowerrc}]
+indent_style=space
+indent_size=2
 
-[*]
+[{*.applejs,*.js}]
+indent_style=space
+indent_size=2
+
+[*.js.flow]
+indent_style=space
+indent_size=2
+
+[{jshint.json,*.jshintrc}]
+indent_style=space
+indent_size=2
 
-# Change these settings to your own preference
-indent_style = space
-indent_size = 4
+[{*.jscs.json,*.jscsrc}]
+indent_style=space
+indent_size=2
 
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
+[*.scss]
+indent_style=space
+indent_size=2
 
-[*.md]
-trim_trailing_whitespace = false
+[*.coffee]
+indent_style=space
+indent_size=2
 
-[{package,bower}.json]
-indent_style = space
-indent_size = 2
+[{.analysis_options,*.yml,*.yaml}]
+indent_style=space
+indent_size=2
 
-[Makefile]
-indent_style = tab
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..5e6ea3a1
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,25 @@
+{
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "semi": 2,
+    "no-unused-vars" : "off",
+    "no-plusplus" : "off",
+    "no-restricted-properties" : "off",
+    "prefer-template" : "off",
+    "import/no-extraneous-dependencies" : "off",
+    "import/prefer-default-export" : "off",
+    "max-len": ["off", 100, 2, {
+      "ignoreUrls": true,
+      "ignoreComments": false,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true
+    }]
+  }
+}
diff --git a/bower.json b/bower.json
index 124ba5a7..35c59a03 100644
--- a/bower.json
+++ b/bower.json
@@ -30,11 +30,11 @@
     "!demo/**/*"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#1.9.x",
+    "polymer": "Polymer/polymer#^2.0.1",
     "myscript-common-element": "2.0.0-alpha1",
-    "KaTeX": "katex#0.7.x"
+    "KaTeX": "katex#^0.7.1"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#1.1.x"
+    "iron-component-page": "PolymerElements/iron-component-page#^3.0.0"
   }
 }
diff --git a/katex-component.html b/katex-component.html
index 01b958bf..19a3f95c 100644
--- a/katex-component.html
+++ b/katex-component.html
@@ -1,42 +1,1054 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="./katex-import.html">
 
 <dom-module id="katex-component">
-    <style>
-        :host {
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    </style>
-    <template></template>
-</dom-module>
-<script>
-    Polymer({
-                is: 'katex-component',
-                properties: {
+    <template>
+        <style>
+            :host {
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .katex-display {
+                display: block;
+                margin: 1em 0;
+                text-align: center
+            }
+
+            .katex-display > .katex {
+                display: inline-block;
+                text-align: initial
+            }
+
+            .katex {
+                font: 400 1.21em KaTeX_Main, Times New Roman, serif;
+                line-height: 1.2;
+                white-space: nowrap;
+                text-indent: 0
+            }
+
+            .katex .katex-html {
+                display: inline-block
+            }
+
+            .katex .katex-mathml {
+                position: absolute;
+                clip: rect(1px, 1px, 1px, 1px);
+                padding: 0;
+                border: 0;
+                height: 1px;
+                width: 1px;
+                overflow: hidden
+            }
+
+            .katex .base,
+            .katex .strut {
+                display: inline-block
+            }
+
+            .katex .mathrm {
+                font-style: normal
+            }
+
+            .katex .textit {
+                font-style: italic
+            }
+
+            .katex .mathit {
+                font-family: KaTeX_Math;
+                font-style: italic
+            }
+
+            .katex .mathbf {
+                font-family: KaTeX_Main;
+                font-weight: 700
+            }
+
+            .katex .amsrm,
+            .katex .mathbb {
+                font-family: KaTeX_AMS
+            }
+
+            .katex .mathcal {
+                font-family: KaTeX_Caligraphic
+            }
+
+            .katex .mathfrak {
+                font-family: KaTeX_Fraktur
+            }
+
+            .katex .mathtt {
+                font-family: KaTeX_Typewriter
+            }
+
+            .katex .mathscr {
+                font-family: KaTeX_Script
+            }
+
+            .katex .mathsf {
+                font-family: KaTeX_SansSerif
+            }
+
+            .katex .mainit {
+                font-family: KaTeX_Main;
+                font-style: italic
+            }
+
+            .katex .mord + .mop {
+                margin-left: .16667em
+            }
+
+            .katex .mord + .mbin {
+                margin-left: .22222em
+            }
+
+            .katex .mord + .mrel {
+                margin-left: .27778em
+            }
+
+            .katex .mop + .mop,
+            .katex .mop + .mord,
+            .katex .mord + .minner {
+                margin-left: .16667em
+            }
+
+            .katex .mop + .mrel {
+                margin-left: .27778em
+            }
+
+            .katex .mop + .minner {
+                margin-left: .16667em
+            }
+
+            .katex .mbin + .minner,
+            .katex .mbin + .mop,
+            .katex .mbin + .mopen,
+            .katex .mbin + .mord {
+                margin-left: .22222em
+            }
+
+            .katex .mrel + .minner,
+            .katex .mrel + .mop,
+            .katex .mrel + .mopen,
+            .katex .mrel + .mord {
+                margin-left: .27778em
+            }
+
+            .katex .mclose + .mop {
+                margin-left: .16667em
+            }
+
+            .katex .mclose + .mbin {
+                margin-left: .22222em
+            }
+
+            .katex .mclose + .mrel {
+                margin-left: .27778em
+            }
+
+            .katex .mclose + .minner,
+            .katex .minner + .mop,
+            .katex .minner + .mord,
+            .katex .mpunct + .mclose,
+            .katex .mpunct + .minner,
+            .katex .mpunct + .mop,
+            .katex .mpunct + .mopen,
+            .katex .mpunct + .mord,
+            .katex .mpunct + .mpunct,
+            .katex .mpunct + .mrel {
+                margin-left: .16667em
+            }
+
+            .katex .minner + .mbin {
+                margin-left: .22222em
+            }
+
+            .katex .minner + .mrel {
+                margin-left: .27778em
+            }
+
+            .katex .minner + .minner,
+            .katex .minner + .mopen,
+            .katex .minner + .mpunct {
+                margin-left: .16667em
+            }
+
+            .katex .mbin.mtight,
+            .katex .mclose.mtight,
+            .katex .minner.mtight,
+            .katex .mop.mtight,
+            .katex .mopen.mtight,
+            .katex .mord.mtight,
+            .katex .mpunct.mtight,
+            .katex .mrel.mtight {
+                margin-left: 0
+            }
+
+            .katex .mclose + .mop.mtight,
+            .katex .minner + .mop.mtight,
+            .katex .mop + .mop.mtight,
+            .katex .mop + .mord.mtight,
+            .katex .mord + .mop.mtight {
+                margin-left: .16667em
+            }
+
+            .katex .reset-textstyle.textstyle {
+                font-size: 1em
+            }
+
+            .katex .reset-textstyle.scriptstyle {
+                font-size: .7em
+            }
+
+            .katex .reset-textstyle.scriptscriptstyle {
+                font-size: .5em
+            }
+
+            .katex .reset-scriptstyle.textstyle {
+                font-size: 1.42857em
+            }
+
+            .katex .reset-scriptstyle.scriptstyle {
+                font-size: 1em
+            }
+
+            .katex .reset-scriptstyle.scriptscriptstyle {
+                font-size: .71429em
+            }
+
+            .katex .reset-scriptscriptstyle.textstyle {
+                font-size: 2em
+            }
+
+            .katex .reset-scriptscriptstyle.scriptstyle {
+                font-size: 1.4em
+            }
+
+            .katex .reset-scriptscriptstyle.scriptscriptstyle {
+                font-size: 1em
+            }
+
+            .katex .style-wrap {
+                position: relative
+            }
+
+            .katex .vlist {
+                display: inline-block
+            }
+
+            .katex .vlist > span {
+                display: block;
+                height: 0;
+                position: relative
+            }
+
+            .katex .vlist > span > span {
+                display: inline-block
+            }
+
+            .katex .vlist .baseline-fix {
+                display: inline-table;
+                table-layout: fixed
+            }
+
+            .katex .msupsub {
+                text-align: left
+            }
+
+            .katex .mfrac > span > span {
+                text-align: center
+            }
+
+            .katex .mfrac .frac-line {
+                width: 100%
+            }
+
+            .katex .mfrac .frac-line:before {
+                border-bottom-style: solid;
+                border-bottom-width: 1px;
+                content: "";
+                display: block
+            }
+
+            .katex .mfrac .frac-line:after {
+                border-bottom-style: solid;
+                border-bottom-width: .04em;
+                content: "";
+                display: block;
+                margin-top: -1px
+            }
+
+            .katex .mspace {
+                display: inline-block
+            }
+
+            .katex .mspace.negativethinspace {
+                margin-left: -.16667em
+            }
+
+            .katex .mspace.thinspace {
+                width: .16667em
+            }
+
+            .katex .mspace.negativemediumspace {
+                margin-left: -.22222em
+            }
+
+            .katex .mspace.mediumspace {
+                width: .22222em
+            }
+
+            .katex .mspace.thickspace {
+                width: .27778em
+            }
+
+            .katex .mspace.sixmuspace {
+                width: .333333em
+            }
+
+            .katex .mspace.eightmuspace {
+                width: .444444em
+            }
+
+            .katex .mspace.enspace {
+                width: .5em
+            }
+
+            .katex .mspace.twelvemuspace {
+                width: .666667em
+            }
+
+            .katex .mspace.quad {
+                width: 1em
+            }
+
+            .katex .mspace.qquad {
+                width: 2em
+            }
+
+            .katex .llap,
+            .katex .rlap {
+                width: 0;
+                position: relative
+            }
+
+            .katex .llap > .inner,
+            .katex .rlap > .inner {
+                position: absolute
+            }
+
+            .katex .llap > .fix,
+            .katex .rlap > .fix {
+                display: inline-block
+            }
+
+            .katex .llap > .inner {
+                right: 0
+            }
+
+            .katex .rlap > .inner {
+                left: 0
+            }
+
+            .katex .katex-logo .a {
+                font-size: .75em;
+                margin-left: -.32em;
+                position: relative;
+                top: -.2em
+            }
+
+            .katex .katex-logo .t {
+                margin-left: -.23em
+            }
+
+            .katex .katex-logo .e {
+                margin-left: -.1667em;
+                position: relative;
+                top: .2155em
+            }
+
+            .katex .katex-logo .x {
+                margin-left: -.125em
+            }
+
+            .katex .rule {
+                display: inline-block;
+                border: 0 solid;
+                position: relative
+            }
+
+            .katex .overline .overline-line,
+            .katex .underline .underline-line {
+                width: 100%
+            }
+
+            .katex .overline .overline-line:before,
+            .katex .underline .underline-line:before {
+                border-bottom-style: solid;
+                border-bottom-width: 1px;
+                content: "";
+                display: block
+            }
+
+            .katex .overline .overline-line:after,
+            .katex .underline .underline-line:after {
+                border-bottom-style: solid;
+                border-bottom-width: .04em;
+                content: "";
+                display: block;
+                margin-top: -1px
+            }
+
+            .katex .sqrt > .sqrt-sign {
+                position: relative
+            }
+
+            .katex .sqrt .sqrt-line {
+                width: 100%
+            }
+
+            .katex .sqrt .sqrt-line:before {
+                border-bottom-style: solid;
+                border-bottom-width: 1px;
+                content: "";
+                display: block
+            }
+
+            .katex .sqrt .sqrt-line:after {
+                border-bottom-style: solid;
+                border-bottom-width: .04em;
+                content: "";
+                display: block;
+                margin-top: -1px
+            }
+
+            .katex .sqrt > .root {
+                margin-left: .27777778em;
+                margin-right: -.55555556em
+            }
+
+            .katex .fontsize-ensurer,
+            .katex .sizing {
+                display: inline-block
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size1,
+            .katex .sizing.reset-size1.size1 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size2,
+            .katex .sizing.reset-size1.size2 {
+                font-size: 1.4em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size3,
+            .katex .sizing.reset-size1.size3 {
+                font-size: 1.6em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size4,
+            .katex .sizing.reset-size1.size4 {
+                font-size: 1.8em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size5,
+            .katex .sizing.reset-size1.size5 {
+                font-size: 2em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size6,
+            .katex .sizing.reset-size1.size6 {
+                font-size: 2.4em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size7,
+            .katex .sizing.reset-size1.size7 {
+                font-size: 2.88em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size8,
+            .katex .sizing.reset-size1.size8 {
+                font-size: 3.46em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size9,
+            .katex .sizing.reset-size1.size9 {
+                font-size: 4.14em
+            }
+
+            .katex .fontsize-ensurer.reset-size1.size10,
+            .katex .sizing.reset-size1.size10 {
+                font-size: 4.98em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size1,
+            .katex .sizing.reset-size2.size1 {
+                font-size: .71428571em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size2,
+            .katex .sizing.reset-size2.size2 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size3,
+            .katex .sizing.reset-size2.size3 {
+                font-size: 1.14285714em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size4,
+            .katex .sizing.reset-size2.size4 {
+                font-size: 1.28571429em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size5,
+            .katex .sizing.reset-size2.size5 {
+                font-size: 1.42857143em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size6,
+            .katex .sizing.reset-size2.size6 {
+                font-size: 1.71428571em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size7,
+            .katex .sizing.reset-size2.size7 {
+                font-size: 2.05714286em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size8,
+            .katex .sizing.reset-size2.size8 {
+                font-size: 2.47142857em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size9,
+            .katex .sizing.reset-size2.size9 {
+                font-size: 2.95714286em
+            }
+
+            .katex .fontsize-ensurer.reset-size2.size10,
+            .katex .sizing.reset-size2.size10 {
+                font-size: 3.55714286em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size1,
+            .katex .sizing.reset-size3.size1 {
+                font-size: .625em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size2,
+            .katex .sizing.reset-size3.size2 {
+                font-size: .875em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size3,
+            .katex .sizing.reset-size3.size3 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size4,
+            .katex .sizing.reset-size3.size4 {
+                font-size: 1.125em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size5,
+            .katex .sizing.reset-size3.size5 {
+                font-size: 1.25em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size6,
+            .katex .sizing.reset-size3.size6 {
+                font-size: 1.5em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size7,
+            .katex .sizing.reset-size3.size7 {
+                font-size: 1.8em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size8,
+            .katex .sizing.reset-size3.size8 {
+                font-size: 2.1625em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size9,
+            .katex .sizing.reset-size3.size9 {
+                font-size: 2.5875em
+            }
+
+            .katex .fontsize-ensurer.reset-size3.size10,
+            .katex .sizing.reset-size3.size10 {
+                font-size: 3.1125em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size1,
+            .katex .sizing.reset-size4.size1 {
+                font-size: .55555556em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size2,
+            .katex .sizing.reset-size4.size2 {
+                font-size: .77777778em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size3,
+            .katex .sizing.reset-size4.size3 {
+                font-size: .88888889em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size4,
+            .katex .sizing.reset-size4.size4 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size5,
+            .katex .sizing.reset-size4.size5 {
+                font-size: 1.11111111em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size6,
+            .katex .sizing.reset-size4.size6 {
+                font-size: 1.33333333em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size7,
+            .katex .sizing.reset-size4.size7 {
+                font-size: 1.6em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size8,
+            .katex .sizing.reset-size4.size8 {
+                font-size: 1.92222222em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size9,
+            .katex .sizing.reset-size4.size9 {
+                font-size: 2.3em
+            }
+
+            .katex .fontsize-ensurer.reset-size4.size10,
+            .katex .sizing.reset-size4.size10 {
+                font-size: 2.76666667em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size1,
+            .katex .sizing.reset-size5.size1 {
+                font-size: .5em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size2,
+            .katex .sizing.reset-size5.size2 {
+                font-size: .7em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size3,
+            .katex .sizing.reset-size5.size3 {
+                font-size: .8em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size4,
+            .katex .sizing.reset-size5.size4 {
+                font-size: .9em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size5,
+            .katex .sizing.reset-size5.size5 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size6,
+            .katex .sizing.reset-size5.size6 {
+                font-size: 1.2em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size7,
+            .katex .sizing.reset-size5.size7 {
+                font-size: 1.44em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size8,
+            .katex .sizing.reset-size5.size8 {
+                font-size: 1.73em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size9,
+            .katex .sizing.reset-size5.size9 {
+                font-size: 2.07em
+            }
+
+            .katex .fontsize-ensurer.reset-size5.size10,
+            .katex .sizing.reset-size5.size10 {
+                font-size: 2.49em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size1,
+            .katex .sizing.reset-size6.size1 {
+                font-size: .41666667em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size2,
+            .katex .sizing.reset-size6.size2 {
+                font-size: .58333333em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size3,
+            .katex .sizing.reset-size6.size3 {
+                font-size: .66666667em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size4,
+            .katex .sizing.reset-size6.size4 {
+                font-size: .75em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size5,
+            .katex .sizing.reset-size6.size5 {
+                font-size: .83333333em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size6,
+            .katex .sizing.reset-size6.size6 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size7,
+            .katex .sizing.reset-size6.size7 {
+                font-size: 1.2em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size8,
+            .katex .sizing.reset-size6.size8 {
+                font-size: 1.44166667em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size9,
+            .katex .sizing.reset-size6.size9 {
+                font-size: 1.725em
+            }
+
+            .katex .fontsize-ensurer.reset-size6.size10,
+            .katex .sizing.reset-size6.size10 {
+                font-size: 2.075em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size1,
+            .katex .sizing.reset-size7.size1 {
+                font-size: .34722222em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size2,
+            .katex .sizing.reset-size7.size2 {
+                font-size: .48611111em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size3,
+            .katex .sizing.reset-size7.size3 {
+                font-size: .55555556em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size4,
+            .katex .sizing.reset-size7.size4 {
+                font-size: .625em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size5,
+            .katex .sizing.reset-size7.size5 {
+                font-size: .69444444em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size6,
+            .katex .sizing.reset-size7.size6 {
+                font-size: .83333333em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size7,
+            .katex .sizing.reset-size7.size7 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size8,
+            .katex .sizing.reset-size7.size8 {
+                font-size: 1.20138889em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size9,
+            .katex .sizing.reset-size7.size9 {
+                font-size: 1.4375em
+            }
+
+            .katex .fontsize-ensurer.reset-size7.size10,
+            .katex .sizing.reset-size7.size10 {
+                font-size: 1.72916667em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size1,
+            .katex .sizing.reset-size8.size1 {
+                font-size: .28901734em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size2,
+            .katex .sizing.reset-size8.size2 {
+                font-size: .40462428em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size3,
+            .katex .sizing.reset-size8.size3 {
+                font-size: .46242775em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size4,
+            .katex .sizing.reset-size8.size4 {
+                font-size: .52023121em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size5,
+            .katex .sizing.reset-size8.size5 {
+                font-size: .57803468em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size6,
+            .katex .sizing.reset-size8.size6 {
+                font-size: .69364162em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size7,
+            .katex .sizing.reset-size8.size7 {
+                font-size: .83236994em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size8,
+            .katex .sizing.reset-size8.size8 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size9,
+            .katex .sizing.reset-size8.size9 {
+                font-size: 1.19653179em
+            }
+
+            .katex .fontsize-ensurer.reset-size8.size10,
+            .katex .sizing.reset-size8.size10 {
+                font-size: 1.43930636em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size1,
+            .katex .sizing.reset-size9.size1 {
+                font-size: .24154589em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size2,
+            .katex .sizing.reset-size9.size2 {
+                font-size: .33816425em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size3,
+            .katex .sizing.reset-size9.size3 {
+                font-size: .38647343em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size4,
+            .katex .sizing.reset-size9.size4 {
+                font-size: .43478261em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size5,
+            .katex .sizing.reset-size9.size5 {
+                font-size: .48309179em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size6,
+            .katex .sizing.reset-size9.size6 {
+                font-size: .57971014em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size7,
+            .katex .sizing.reset-size9.size7 {
+                font-size: .69565217em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size8,
+            .katex .sizing.reset-size9.size8 {
+                font-size: .83574879em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size9,
+            .katex .sizing.reset-size9.size9 {
+                font-size: 1em
+            }
+
+            .katex .fontsize-ensurer.reset-size9.size10,
+            .katex .sizing.reset-size9.size10 {
+                font-size: 1.20289855em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size1,
+            .katex .sizing.reset-size10.size1 {
+                font-size: .20080321em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size2,
+            .katex .sizing.reset-size10.size2 {
+                font-size: .2811245em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size3,
+            .katex .sizing.reset-size10.size3 {
+                font-size: .32128514em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size4,
+            .katex .sizing.reset-size10.size4 {
+                font-size: .36144578em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size5,
+            .katex .sizing.reset-size10.size5 {
+                font-size: .40160643em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size6,
+            .katex .sizing.reset-size10.size6 {
+                font-size: .48192771em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size7,
+            .katex .sizing.reset-size10.size7 {
+                font-size: .57831325em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size8,
+            .katex .sizing.reset-size10.size8 {
+                font-size: .69477912em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size9,
+            .katex .sizing.reset-size10.size9 {
+                font-size: .8313253em
+            }
+
+            .katex .fontsize-ensurer.reset-size10.size10,
+            .katex .sizing.reset-size10.size10 {
+                font-size: 1em
+            }
+
+            .katex .delimsizing.size1 {
+                font-family: KaTeX_Size1
+            }
+
+            .katex .delimsizing.size2 {
+                font-family: KaTeX_Size2
+            }
+
+            .katex .delimsizing.size3 {
+                font-family: KaTeX_Size3
+            }
+
+            .katex .delimsizing.size4 {
+                font-family: KaTeX_Size4
+            }
+
+            .katex .delimsizing.mult .delim-size1 > span {
+                font-family: KaTeX_Size1
+            }
+
+            .katex .delimsizing.mult .delim-size4 > span {
+                font-family: KaTeX_Size4
+            }
+
+            .katex .nulldelimiter {
+                display: inline-block;
+                width: .12em
+            }
+
+            .katex .op-symbol {
+                position: relative
+            }
+
+            .katex .op-symbol.small-op {
+                font-family: KaTeX_Size1
+            }
+
+            .katex .op-symbol.large-op {
+                font-family: KaTeX_Size2
+            }
+
+            .katex .accent > .vlist > span,
+            .katex .op-limits > .vlist > span {
+                text-align: center
+            }
+
+            .katex .accent .accent-body > span {
+                width: 0
+            }
+
+            .katex .accent .accent-body.accent-vec > span {
+                position: relative;
+                left: .326em
+            }
+
+            .katex .mtable .vertical-separator {
+                display: inline-block;
+                margin: 0 -.025em;
+                border-right: .05em solid #000
+            }
+
+            .katex .mtable .arraycolsep {
+                display: inline-block
+            }
+
+            .katex .mtable .col-align-c > .vlist {
+                text-align: center
+            }
+
+            .katex .mtable .col-align-l > .vlist {
+                text-align: left
+            }
+
+            .katex .mtable .col-align-r > .vlist {
+                text-align: right
+            }
+        </style>
+        <div id="exports"></div>
+    </template>
+    <script>
+        class KatexComponent extends Polymer.Element {
+
+            static get is() {
+                return 'katex-component'
+            }
+
+            static get properties() {
+                return {
                     value: {
                         type: String,
                         notify: true,
                         reflectToAttribute: true,
                         observer: '_valueChanged'
                     }
-                },
-                /**
-                 * @private
-                 */
-                _valueChanged: function (value) {
-                    this.innerText = '';
-                    if (value) {
-                        // Updating the rendering zone displayed with KaTex (taking the latex export as an input)
-                        try {
-                            katex.render(value, this);
-                        } catch (e) {
-                            this.innerText = value;
-                        }
+                }
+            }
+
+            connectedCallback() {
+                super.connectedCallback();
+                this.render = this.shadowRoot.querySelector('#exports');
+            }
+
+            _valueChanged(value) {
+                this.render.innerText = '';
+                if (value) {
+                    // Updating the rendering zone displayed with KaTex (taking the latex export as an input)
+                    try {
+                        katex.render(value, this.render);
+                    } catch (e) {
+                        this.render.innerText = value;
                     }
                 }
             }
-    );
-</script>
+
+        }
+        customElements.define(KatexComponent.is, KatexComponent);
+    </script>
+</dom-module>
diff --git a/myscript-math-exports.html b/myscript-math-exports.html
index 54787cde..0637cf78 100644
--- a/myscript-math-exports.html
+++ b/myscript-math-exports.html
@@ -1,24 +1,26 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="katex-component.html">
 
 <dom-module id="myscript-math-exports">
-    <style>
-        :host {
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            color: var(--myscript-math-exports-color, #000000);
-            min-height: 60px;
-            overflow: auto;
-        }
-
-        .export {
-            flex-grow: 1;
-        }
-    </style>
     <template>
+        <style>
+            :host {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                color: var(--myscript-math-exports-color, #000000);
+                min-height: 60px;
+                overflow: auto;
+            }
+
+            .export {
+                flex-grow: 1;
+            }
+        </style>
         <template is="dom-if" if="[[ _displaymath(resulttypes, mimetypes) ]]">
-            <katex-component value="[[ _getLatexCleaned(exports) ]]" class="export math">[[ _getLatexCleaned(exports) ]]</katex-component>
+            <katex-component value="[[ _getLatexCleaned(exports) ]]" class="export math">
+                [[ _getLatexCleaned(exports) ]]
+            </katex-component>
         </template>
         <template is="dom-if" if="[[ _displaylatex(resulttypes, mimetypes) ]]">
             <div class="export latex">[[ _getLatex(exports) ]]</div>
@@ -33,12 +35,15 @@
             <div class="export symboltree">[[ _getSymboltree(exports) ]]</div>
         </template>
     </template>
-</dom-module>
+    <script>
+        class MyScriptMathExports extends Polymer.Element {
 
-<script>
-    Polymer({
-                is: 'myscript-math-exports',
-                properties: {
+            static get is() {
+                return 'myscript-math-exports'
+            }
+
+            static get properties() {
+                return {
                     /**
                      * Math export types (LATEX, MATHML or SYMBOLTREE).
                      * <b>Warning</b>: v3 only, for v4, use mimetypes instead
@@ -65,78 +70,65 @@
                         type: Object,
                         notify: true
                     }
-                },
-                /**
-                 * @private
-                 */
-                _getLatex: function (exports) {
-                    if (exports['application/x-latex']) {
-                        return exports['application/x-latex']
-                    }
-                    return exports.LATEX;
-                },
-                _getLatexCleaned: function (exports) {
-                    return this._getLatex(exports)
-                        .replace("\\overrightarrow", "\\vec")
-                        .replace("\\llbracket", "\\lbracket")
-                        .replace("\\rrbracket", "\\rbracket")
-                        .replace("\\widehat", "\\hat")
-                        .replace(new RegExp("(align.{1})", "g"), "aligned");
-                },
-                /**
-                 * @private
-                 */
-                _getMathml: function (exports) {
-                    if (exports['application/mathml+xml']) {
-                        return exports['application/mathml+xml']
-                    }
-                    return exports.MATHML;
-                },
-                /**
-                 * @private
-                 */
-                _getOfficeopenxml: function (exports) {
-                    if (exports['application/mathofficeXML']) {
-                        return exports['application/mathofficeXML']
-                    }
-                    return exports.OFFICEOPENXMLMATH;
-                },
-                /**
-                 * @private
-                 */
-                _getSymboltree: function (exports) {
-                    return JSON.stringify(exports.SYMBOLTREE);
-                },
-                /**
-                 * @private
-                 */
-                _displaymath: function (resulttypes, mimetypes) {
-                    return !((resulttypes.length > 0) || (mimetypes.length > 0));
-                },
-                /**
-                 * @private
-                 */
-                _displaylatex: function (resulttypes, mimetypes) {
-                    return (resulttypes.indexOf('LATEX') > -1) || (mimetypes.indexOf('application/x-latex') > -1);
-                },
-                /**
-                 * @private
-                 */
-                _displaymathml: function (resulttypes, mimetypes) {
-                    return (resulttypes.indexOf('MATHML') > -1) || (mimetypes.indexOf('application/mathml+xml') > -1);
-                },
-                /**
-                 * @private
-                 */
-                _displayofficeopenxml: function (resulttypes, mimetypes) {
-                    return (resulttypes.indexOf('OFFICEOPENXMLMATH') > -1) || (mimetypes.indexOf('application/mathofficeXML') > -1);
-                },
-                /**
-                 * @private
-                 */
-                _displaysymboltree: function (resulttypes, mimetypes) {
-                    return resulttypes.indexOf('SYMBOLTREE') > -1;
                 }
             }
-    );
-</script>
+
+            _getLatex(exports) {
+                if (exports['application/x-latex']) {
+                    return exports['application/x-latex'] || '';
+                }
+                return exports.LATEX || '';
+            }
+
+            _getLatexCleaned(exports) {
+                return this._getLatex(exports)
+                    .replace("\\overrightarrow", "\\vec")
+                    .replace("\\llbracket", "\\lbracket")
+                    .replace("\\rrbracket", "\\rbracket")
+                    .replace("\\widehat", "\\hat")
+                    .replace(new RegExp("(align.{1})", "g"), "aligned");
+            }
+
+            _getMathml(exports) {
+                if (exports['application/mathml+xml']) {
+                    return exports['application/mathml+xml'];
+                }
+                return exports.MATHML;
+            }
+
+            _getOfficeopenxml(exports) {
+                if (exports['application/mathofficeXML']) {
+                    return exports['application/mathofficeXML'];
+                }
+                return exports.OFFICEOPENXMLMATH;
+            }
+
+            _getSymboltree(exports) {
+                return JSON.stringify(exports.SYMBOLTREE);
+            }
+
+            _displaymath(resulttypes, mimetypes) {
+                return !((resulttypes.length > 0) || (mimetypes.length > 0));
+            }
+
+            _displaylatex(resulttypes, mimetypes) {
+                return (resulttypes.indexOf('LATEX') > -1) || (mimetypes.indexOf('application/x-latex') > -1);
+            }
+
+            _displaymathml(resulttypes, mimetypes) {
+                return (resulttypes.indexOf('MATHML') > -1) || (mimetypes.indexOf('application/mathml+xml') > -1);
+            }
+
+            _displayofficeopenxml(resulttypes, mimetypes) {
+                return (resulttypes.indexOf('OFFICEOPENXMLMATH') > -1) || (mimetypes.indexOf('application/mathofficeXML') > -1);
+            }
+
+            _displaysymboltree(resulttypes, mimetypes) {
+                return resulttypes.indexOf('SYMBOLTREE') > -1;
+            }
+
+        }
+        customElements.define(MyScriptMathExports.is, MyScriptMathExports);
+    </script>
+</dom-module>
+
diff --git a/myscript-math-web.html b/myscript-math-web.html
index 8d6f559c..22e180a0 100644
--- a/myscript-math-web.html
+++ b/myscript-math-web.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../myscript-common-element/myscript-common-element.html">
 <link rel="import" href="./myscript-math-exports.html">
 <!--
@@ -12,32 +12,29 @@
 @demo
 -->
 <dom-module id="myscript-math-web">
-    <style>
-        :host {
-            box-sizing: border-box;
-            touch-action: none;
-            display: block;
-            --myscript-common-element-color: var(--myscript-math-web-color, #FFFFFF);
-            --myscript-common-element-background-color: var(--myscript-math-web-background-color, #1A9FFF);
-            --myscript-common-element-focus-background-color: var(--myscript-math-web-focus-background-color, #1A9FFF);
-            --myscript-common-element-disabled-background-color: var(--myscript-math-web-disabled-background-color, #F5F6F7);
-
-            --myscript-math-exports-color: #1A9FFF;
-        }
+    <template>
+        <style>
+            :host {
+                box-sizing: border-box;
+                touch-action: none;
+                display: block;
+                --myscript-common-element-color: var(--myscript-math-web-color, #FFFFFF);
+                --myscript-common-element-background-color: var(--myscript-math-web-background-color, #1A9FFF);
+                --myscript-common-element-focus-background-color: var(--myscript-math-web-focus-background-color, #1A9FFF);
+                --myscript-common-element-disabled-background-color: var(--myscript-math-web-disabled-background-color, #F5F6F7);
 
-        [hidden] {
-            display: none;
-        }
+                --myscript-math-exports-color: #1A9FFF;
+            }
 
-        myscript-math-exports {
-            height: 100px;
-            font-size: larger;
-            overflow: auto;
-        }
+            [hidden] {
+                display: none;
+            }
 
-        myscript-common-element {
-            height: calc(100% - 100px);
-        }
+            myscript-math-exports {
+                height: 100px;
+                font-size: larger;
+                overflow: auto;
+            }
 
         .exports {
             font-size: larger;
@@ -86,12 +83,15 @@
             debug="{{ debug }}">
         </myscript-common-element>
     </template>
-</dom-module>
+    <script>
+        class MyScriptMathWeb extends Polymer.Element {
 
-<script>
-    Polymer({
-                is: 'myscript-math-web',
-                properties: {
+            static get is() {
+                return 'myscript-math-web'
+            }
+
+            static get properties() {
+                return {
                     // ----------------------------------------------------------------------------------------------
                     // The following section is a recopy of myscript-common-element attributes
                     // Polymer documentation generation prevent from reusing attributes from another element.
@@ -179,7 +179,7 @@
                         value: true,
                         notify: true,
                         reflectToAttribute: true,
-                        observer: 'unloadedChanged'
+                        observer: '_unloadedChanged'
                     },
                     /**
                      * Set the additional configuration used to feed MyScript ink Paper (Structure of object as defined in MyScriptjs MyScriptJSOptions.js file)
@@ -366,185 +366,161 @@
                         value: false,
                         reflectToAttribute: true
                     }
-                },
-                //-----------------------------------------------------------------------
-                //---------  Wrapping of myscript-common-element  methods    ------------
-                //-----------------------------------------------------------------------
-                /**
-                 * Clear all context
-                 */
-                clear: function () {
-                    if (this.myscriptcommonelement) {
-                        this.myscriptcommonelement.clear();
-                    }
-                },
-                /**
-                 * Undo action, and launch recognition if timeout is set
-                 */
-                undo: function () {
-                    if (this.myscriptcommonelement) {
-                        this.myscriptcommonelement.undo();
-                    }
-                },
-                /**
-                 * Redo action, and launch recognition if timeout is set
-                 */
-                redo: function () {
-                    if (this.myscriptcommonelement) {
-                        this.myscriptcommonelement.redo();
-                    }
-                },
-                /**
-                 * Launch export
-                 */
-                askForExport: function (exports) {
-                    if (this.myscriptcommonelement) {
-                        this.myscriptcommonelement.askForExport(exports);
-                    }
-                },
-                /**
-                 * Return the stats allowing to monitor what ink size is send to the server.
-                 * Stats objects format {strokesCount : 0, pointsCount : 0, byteSize : 0, humanSize : 0, humanUnit : 'BYTE'} humanUnit could have the values BYTE, BYTES, KiB, MiB
-                 */
-                getStats: function () {
-                    if (this.myscriptcommonelement) {
-                        return this.myscriptcommonelement.getStats();
-                    }
-                },
-                //-----------------------------------------------------------------------
-                //---------  Wrapping END                                    ------------
-                //-----------------------------------------------------------------------
-                unloadedChanged: function (unloaded) {
-                    this.buildConfiguration();
-                    if (unloaded === true) {
-                        if (this.myscriptcommonelement && !this.initializing) {
-                            this.myscriptcommonelement.unloaded = true;
-                        }
-                    }
-                },
-                // Will be renamed connected with pure custom element support
-                attached: function () {
+                }
+            }
 
-                    /**
-                     * Function returning the root dom element whatever shadow or shady dom is used.
-                     * @param domElement
-                     * @returns {*}
-                     */
-                    function qsWrapper(domElement) {
-                        if (domElement.shadowRoot) {
-                            return domElement.shadowRoot;
-                        } else {
-                            return domElement;
-                        }
+            //-----------------------------------------------------------------------
+            //---------  Wrapping of myscript-common-element  methods    ------------
+            //-----------------------------------------------------------------------
+            /**
+             * Clear all context
+             */
+            clear() {
+                if (this.myscriptcommonelement) {
+                    this.myscriptcommonelement.clear();
+                }
+            }
+
+            /**
+             * Undo action, and launch recognition if timeout is set
+             */
+            undo() {
+                if (this.myscriptcommonelement) {
+                    this.myscriptcommonelement.undo();
+                }
+            }
+
+            /**
+             * Redo action, and launch recognition if timeout is set
+             */
+            redo() {
+                if (this.myscriptcommonelement) {
+                    this.myscriptcommonelement.redo();
+                }
+            }
+
+            /**
+             * Launch export
+             */
+            askForExport(exports) {
+                if (this.myscriptcommonelement) {
+                    this.myscriptcommonelement.askForExport(exports);
+                }
+            }
+
+            /**
+             * Return the stats allowing to monitor what ink size is send to the server.
+             * Stats objects format {strokesCount : 0, pointsCount : 0, byteSize : 0, humanSize : 0, humanUnit : 'BYTE'} humanUnit could have the values BYTE, BYTES, KiB, MiB
+             */
+            getStats() {
+                if (this.myscriptcommonelement) {
+                    return this.myscriptcommonelement.getStats();
+                }
+            }
+
+            //-----------------------------------------------------------------------
+            //---------  Wrapping END                                    ------------
+            //-----------------------------------------------------------------------
+            _unloadedChanged(unloaded) {
+                this._buildConfiguration();
+                if (unloaded === true) {
+                    if (this.myscriptcommonelement && !this.initializing) {
+                        this.myscriptcommonelement.unloaded = true;
                     }
+                }
+            }
+
+            connectedCallback() {
+                super.connectedCallback();
 
-                    this.logger = MyScript.LoggerConfig.getLogger('math-web');
-                    this.logger.setLevel(this.debug ? 'DEBUG' : 'ERROR', false);
-
-                    this.initializing = true;
-                    this.logger.info('attached callback');
-                    this.myscriptcommonelement = qsWrapper(this).querySelector('myscript-common-element');
-                    this.myscriptcommonelement.configuration = this.buildConfiguration();
-
-                    this.attachListener(this);
-
-                    this.logger.info('attached');
-                    this.initializing = false;
-                },
-                detached: function () {
-                    this.logger.info('detached callback');
-                    this.detachListener(this);
-                    this.logger.info('detached');
-                },
-                /**
-                 * @private
-                 */
-                attachListener: function (myscriptMathWebElement) {
-                    function commonElementListener(event) {
-                        myscriptMathWebElement.logger.trace(event.type + ' event intercepted', event);
+                this.logger = MyScript.LoggerConfig.getLogger('math-web');
+                this.logger.setLevel(this.debug ? 'DEBUG' : 'ERROR', false);
+
+                this.initializing = true;
+                this.logger.info('attached callback');
+                this.myscriptcommonelement = this.shadowRoot.querySelector('myscript-common-element');
+                this.myscriptcommonelement.configuration = this._buildConfiguration();
+
+                this.currentListeners = {};
+                const eventTypes = Object
+                    .keys(MyScript.Constants.EventType)
+                    .map(key => MyScript.Constants.EventType[key])
+                    .forEach(type => this.currentListeners[type] = (event) => {
+                        this.logger.trace(event.type + ' event intercepted', event);
                         switch (event.type) {
                             case MyScript.Constants.EventType.LOADED:
-                                myscriptMathWebElement.unloaded = false;
+                                this.unloaded = false;
                                 break;
                             default:
                                 break;
                         }
                         // Just forwarding event there.
-                        myscriptMathWebElement.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
-                    }
-
-                    const eventTypes = Object.keys(MyScript.Constants.EventType).map(function (key) {
-                        return MyScript.Constants.EventType[key];
+                        this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
                     });
 
-                    myscriptMathWebElement.currentListeners = {};
-                    eventTypes.forEach(function (type) {
-                        myscriptMathWebElement.currentListeners[type] = commonElementListener;
-                    });
-                    Object.keys(myscriptMathWebElement.currentListeners).forEach(function (type) {
-                        myscriptMathWebElement.myscriptcommonelement.addEventListener(type, myscriptMathWebElement.currentListeners[type])
-                    });
-                },
-
-                /**
-                 * @private
-                 */
-                detachListener: function (myscriptMathWebElement) {
-                    Object.keys(myscriptMathWebElement.currentListeners).forEach(function (type) {
-                        myscriptMathWebElement.myscriptcommonelement.removeEventListener(type, myscriptMathWebElement.currentListeners[type])
-                    });
-                },
-
-                /**
-                 * @private
-                 */
-                buildConfiguration: function () {
-                    if (!this.configuration) {
-                        this.configuration = {};
-                    }
-                    if (!this.configuration.recognitionParams) {
-                        this.configuration.recognitionParams = {};
-                    }
+                Object
+                    .keys(this.currentListeners)
+                    .forEach(type => this.myscriptcommonelement.addEventListener(type, this.currentListeners[type]));
 
-                    if (!this.configuration.recognitionParams.v3) {
-                        this.configuration.recognitionParams.v3 = {};
-                    }
-                    if (!this.configuration.recognitionParams.v3.mathParameter) {
-                        this.configuration.recognitionParams.v3.mathParameter = {};
-                    }
+                this.logger.info('attached');
+                this.initializing = false;
+            }
 
-                    this.configuration.recognitionParams.v3.mathParameter.resultTypes = this.resulttypes;
-                    this.configuration.recognitionParams.v3.mathParameter.columnarOperation = this.columnaroperation;
-                    this.configuration.recognitionParams.v3.mathParameter.userResources = this.userresources;
-                    this.configuration.recognitionParams.v3.mathParameter.scratchOutDetectionSensitivity = this.scratchoutdetectionsensitivity;
+            disconnectedCallback() {
+                super.disconnectedCallback();
 
-                    if (!this.configuration.recognitionParams.v4) {
-                        this.configuration.recognitionParams.v4 = {};
-                    }
-                    if (!this.configuration.recognitionParams.v4.math) {
-                        this.configuration.recognitionParams.v4.math = {};
-                    }
-                    if (!this.configuration.recognitionParams.v4.math.solver) {
-                        this.configuration.recognitionParams.v4.math.solver = {};
-                    }
+                this.logger.info('detached callback');
+                Object
+                    .keys(this.currentListeners)
+                    .forEach(type => this.myscriptcommonelement.removeEventListener(type, this.currentListeners[type]));
+                this.logger.info('detached');
+            }
+
+            _buildConfiguration() {
+                if (!this.configuration) {
+                    this.configuration = {};
+                }
+                if (!this.configuration.recognitionParams) {
+                    this.configuration.recognitionParams = {};
+                }
+
+                if (!this.configuration.recognitionParams.v3) {
+                    this.configuration.recognitionParams.v3 = {};
+                }
+                if (!this.configuration.recognitionParams.v3.mathParameter) {
+                    this.configuration.recognitionParams.v3.mathParameter = {};
+                }
 
-                    this.configuration.recognitionParams.v4.math.mimeTypes = this.mimetypes;
-                    this.configuration.recognitionParams.v4.math.solver.enable = this.solverenable;
-                    this.configuration.recognitionParams.v4.math.solver['fractional-part-digits'] = this.solverfractionalpartdigit;
-                    this.configuration.recognitionParams.v4.math.solver['decimal-separator'] = this.solverdecimalseparator;
-                    this.configuration.recognitionParams.v4.math.solver['rounding-mode'] = this.solverroundingmode;
-                    this.configuration.recognitionParams.v4.math.solver['angle-unit'] = this.solverangleunit;
-                    return this.configuration;
-                },
-
-                /**
-                 * @private
-                 */
-                displayExports: function (hideExports, unloaded) {
-                    var display = !hideExports && ( !unloaded || unloaded === true);
-                    // Common element should not be attached if the unload attribute of myscript-math-web element is set to true and if he is not already connected to the dom.
-                    return display;
+                this.configuration.recognitionParams.v3.mathParameter.resultTypes = this.resulttypes;
+                this.configuration.recognitionParams.v3.mathParameter.columnarOperation = this.columnaroperation;
+                this.configuration.recognitionParams.v3.mathParameter.userResources = this.userresources;
+                this.configuration.recognitionParams.v3.mathParameter.scratchOutDetectionSensitivity = this.scratchoutdetectionsensitivity;
+
+                if (!this.configuration.recognitionParams.v4) {
+                    this.configuration.recognitionParams.v4 = {};
+                }
+                if (!this.configuration.recognitionParams.v4.math) {
+                    this.configuration.recognitionParams.v4.math = {};
+                }
+                if (!this.configuration.recognitionParams.v4.math.solver) {
+                    this.configuration.recognitionParams.v4.math.solver = {};
                 }
+
+                this.configuration.recognitionParams.v4.math.mimeTypes = this.mimetypes;
+                this.configuration.recognitionParams.v4.math.solver.enable = this.solverenable;
+                this.configuration.recognitionParams.v4.math.solver['fractional-part-digits'] = this.solverfractionalpartdigit;
+                this.configuration.recognitionParams.v4.math.solver['decimal-separator'] = this.solverdecimalseparator;
+                this.configuration.recognitionParams.v4.math.solver['rounding-mode'] = this.solverroundingmode;
+                this.configuration.recognitionParams.v4.math.solver['angle-unit'] = this.solverangleunit;
+                return this.configuration;
             }
-    );
-</script>
+
+            _displayExports(hideExports, unloaded) {
+                // Common element should not be attached if the unload attribute of myscript-math-web element is set to true and if he is not already connected to the dom.
+                return !hideExports && ( !unloaded || unloaded === true);
+            }
+
+        }
+        customElements.define(MyScriptMathWeb.is, MyScriptMathWeb);
+    </script>
+</dom-module>