diff --git a/.vscode/settings.json b/.vscode/settings.json
index d98d8e3..14b6b63 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,8 @@
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
   ],
-  "javascript.implicitProjectConfig.experimentalDecorators": true
+  "javascript.implicitProjectConfig.experimentalDecorators": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 02e3b79..409d120 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1692,6 +1692,92 @@
         "url-template": "^2.0.8"
       }
     },
+    "@rollup/plugin-commonjs": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz",
+      "integrity": "sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "estree-walker": "^1.0.1",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.25.6",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.6.tgz",
+          "integrity": "sha512-3a5LOMSGoCTH5rbqobC2HuDNRtE2glHZ8J7pK+QZYppyWA36yuNpsX994rIY2nCuyP7CZYy7lQq/X2jygiZ89g==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.4"
+          }
+        },
+        "resolve": {
+          "version": "1.15.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
+          "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.1.tgz",
+      "integrity": "sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.6",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.14.2"
+      },
+      "dependencies": {
+        "builtin-modules": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+          "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.15.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
+          "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.8.tgz",
+      "integrity": "sha512-rYGeAc4sxcZ+kPG/Tw4/fwJODC3IXHYDH4qusdN/b6aLw5LPUbzpecYbEJh4sVQGPFJxd2dBU4kc1H3oy9/bnw==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^1.0.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        }
+      }
+    },
     "@samverschueren/stream-to-observable": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
@@ -1961,9 +2047,9 @@
       "dev": true
     },
     "@types/estree": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.42.tgz",
+      "integrity": "sha512-K1DPVvnBCPxzD+G51/cxVIoc2X8uUVl1zpJeE6iKcgHMj4+tbat5Xu4TjV7v2QSDbIeAfLi2hIk+u2+s0MlpUQ==",
       "dev": true
     },
     "@types/istanbul-lib-coverage": {
@@ -2015,6 +2101,15 @@
       "integrity": "sha512-opgSsy+cEF9N8MgaVPnWVtdJ3o4mV2aMHvDq7thkQUFt0EuOHJon4rQpJfhjmNHB+ikl0Cd6WhWIErOyQ+f7tw==",
       "dev": true
     },
+    "@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -7934,6 +8029,23 @@
       "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
       "dev": true
     },
+    "is-reference": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
+      "integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39"
+      },
+      "dependencies": {
+        "@types/estree": {
+          "version": "0.0.39",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+          "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+          "dev": true
+        }
+      }
+    },
     "is-regex": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -11623,15 +11735,6 @@
       "integrity": "sha512-iCM3ZGeqIzlrH7KxYK+fphlJpCCczyHXc+HhRVbEu9uNTCrzYJjvvtefzeKTCVHd5AP/aD/fzC80JZ4ZP+dQ/A==",
       "dev": true
     },
-    "magic-string": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.1.tgz",
-      "integrity": "sha512-sCuTz6pYom8Rlt4ISPFn6wuFodbKMIHUMv4Qko9P17dpxb7s52KJTmRuZZqHdGmLCK9AOcDare039nRIcfdkEg==",
-      "dev": true,
-      "requires": {
-        "sourcemap-codec": "^1.4.1"
-      }
-    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -17086,13 +17189,22 @@
       }
     },
     "rollup": {
-      "version": "0.67.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.67.4.tgz",
-      "integrity": "sha512-AVuP73mkb4BBMUmksQ3Jw0jTrBTU1i7rLiUYjFxLZGb3xiFmtVEg40oByphkZAsiL0bJC3hRAJUQos/e5EBd+w==",
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.31.1.tgz",
+      "integrity": "sha512-2JREN1YdrS/kpPzEd33ZjtuNbOuBC3ePfuZBdKEybvqcEcszW1ckyVqzcEiEe0nE8sqHK+pbJg+PsAgRJ8+1dg==",
       "dev": true,
       "requires": {
-        "@types/estree": "0.0.39",
-        "@types/node": "*"
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
+          "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==",
+          "dev": true
+        }
       }
     },
     "rollup-plugin-babel": {
@@ -17105,18 +17217,6 @@
         "rollup-pluginutils": "^2.3.0"
       }
     },
-    "rollup-plugin-commonjs": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.2.0.tgz",
-      "integrity": "sha512-0RM5U4Vd6iHjL6rLvr3lKBwnPsaVml+qxOGaaNUWN1lSq6S33KhITOfHmvxV3z2vy9Mk4t0g4rNlVaJJsNQPWA==",
-      "dev": true,
-      "requires": {
-        "estree-walker": "^0.5.2",
-        "magic-string": "^0.25.1",
-        "resolve": "^1.8.1",
-        "rollup-pluginutils": "^2.3.3"
-      }
-    },
     "rollup-plugin-json": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-3.1.0.tgz",
@@ -17126,25 +17226,6 @@
         "rollup-pluginutils": "^2.3.1"
       }
     },
-    "rollup-plugin-node-resolve": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz",
-      "integrity": "sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==",
-      "dev": true,
-      "requires": {
-        "builtin-modules": "^2.0.0",
-        "is-module": "^1.0.0",
-        "resolve": "^1.1.6"
-      },
-      "dependencies": {
-        "builtin-modules": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz",
-          "integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==",
-          "dev": true
-        }
-      }
-    },
     "rollup-plugin-sass": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-sass/-/rollup-plugin-sass-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1e85610..baee6d8 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,8 @@
     "@babel/core": "^7.2.2",
     "@bndynet/typedoc-default-themes": "^0.5.1",
     "@commitlint/cli": "^7.1.2",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/git": "^7.0.8",
     "@types/jest": "^23.3.12",
@@ -78,11 +80,9 @@
     "postcss": "^7.0.14",
     "prettier": "^1.15.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.67.0",
+    "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.0",
-    "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-sass": "^1.1.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-terser": "^4.0.2",
diff --git a/rollup.config.ts b/rollup.config.ts
index 7d341ee..567ae13 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -1,5 +1,5 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import typescript from 'rollup-plugin-typescript2';
 import json from 'rollup-plugin-json';
@@ -10,6 +10,7 @@ import postcss from 'postcss';
 import { terser } from 'rollup-plugin-terser';
 
 const pkg = require('./package.json');
+const config = require('./src/config.js');
 
 const libraryName = pkg.name.indexOf('/') > 0 ? pkg.name.split('/')[1].toLocaleLowerCase() : pkg.name.toLocaleLowerCase();
 
@@ -36,13 +37,17 @@ export default {
   plugins: [
     sass({
       output: `dist/${libraryName}.css`,
-      processor: css =>
-        postcss([autoprefixer])
+      options: {
+        data: `$prefix: '${config.elementPrefix}';`,
+      },
+      processor: css => {
+        return postcss([autoprefixer])
           .process(
             css,
             { from: undefined }, // fix PostCSS without `from` warning
           )
-          .then(result => result.css),
+          .then(result => result.css);
+      },
     }),
     terser(),
     // Allow json resolution
@@ -52,9 +57,15 @@ export default {
       tsconfig: './tsconfig.json',
       useTsconfigDeclarationDir: true,
     }),
+
+    // Allow node_modules resolution, so you can use "external" to control
+    // which external modules to include in the bundle
+    // https://github.com/rollup/rollup-plugin-node-resolve#usage
+    resolve(),
+
     // Allow bundling cjs modules (unlike webpack, rollup doesn"t understand cjs)
     commonjs({
-      include: 'node_modules/**',
+      include: ['node_modules/**', './src/**'],
       namedExports: {
         // "node_modules/react/index.js": [
         //   "Component",
@@ -67,10 +78,6 @@ export default {
         // ],
       },
     }),
-    // Allow node_modules resolution, so you can use "external" to control
-    // which external modules to include in the bundle
-    // https://github.com/rollup/rollup-plugin-node-resolve#usage
-    resolve(),
 
     babel({
       exclude: 'node_modules/**',
diff --git a/site/Components/Buttons.html b/site/Components/Buttons.html
index aa9abd3..fb51fd4 100644
--- a/site/Components/Buttons.html
+++ b/site/Components/Buttons.html
@@ -1,4 +1,4 @@
-<ui-button text="Submit"></ui-button>
-<ui-button text="Submit" disabled></ui-button>
-<ui-button theme="danger" text="Download"></ui-button>
-<ui-button pending theme="danger" text="Download"></ui-button>
\ No newline at end of file
+<web-button text="Submit"></web-button>
+<web-button text="Submit" disabled></web-button>
+<web-button theme="danger" text="Download"></web-button>
+<web-button pending theme="danger" text="Download"></web-button>
\ No newline at end of file
diff --git a/site/Components/Indicators.html b/site/Components/Indicators.html
index f105f71..4d0e3fb 100644
--- a/site/Components/Indicators.html
+++ b/site/Components/Indicators.html
@@ -1,9 +1,9 @@
-<ui-indicator length="5"></ui-indicator>
-<ui-indicator class="square" theme="primary" length="5" active="1"></ui-indicator>
-<ui-indicator class="rectangle" theme="success" length="3" active="2"></ui-indicator>
-<ui-indicator class="bg-dark" theme="light" length="5"></ui-indicator>
+<web-indicator length="5"></web-indicator>
+<web-indicator class="square" theme="primary" length="5" active="1"></web-indicator>
+<web-indicator class="rectangle" theme="success" length="3" active="2"></web-indicator>
+<web-indicator class="bg-dark" theme="light" length="5"></web-indicator>
 <script>
-  const indicators = document.querySelector('ui-indicator');
+  const indicators = document.querySelector('web-indicator');
   indicators.addEventListener('index-changed', function(e) {
     console.debug(e.detail);    // output: {index: 0}
   });
diff --git a/site/Components/Input.html b/site/Components/Input.html
index efc29c4..f3433b6 100644
--- a/site/Components/Input.html
+++ b/site/Components/Input.html
@@ -1,7 +1,7 @@
-<ui-input tips="No label" value="value"></ui-input>
-<ui-input label="User name" prefix="@" placeholder="Type your name..." tips="Please type your full name"></ui-input>
-<ui-input label="Total" prefix="$" suffix=".00"></ui-input>
-<ui-input label="Required <span style='color:red;'>*</span>" required required-message="This is a required field."></ui-input>
-<ui-input id="email" label="Email" tips="Your primary email address." pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></ui-input>
-<ui-input label="Email" value="invalid email" validate pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></ui-input>
-<ui-input label="Color" value="#000" type="color-text"></ui-input>
\ No newline at end of file
+<web-input tips="No label" value="value"></web-input>
+<web-input label="User name" prefix="@" placeholder="Type your name..." tips="Please type your full name"></web-input>
+<web-input label="Total" prefix="$" suffix=".00"></web-input>
+<web-input label="Required <span style='color:red;'>*</span>" required required-message="This is a required field."></web-input>
+<web-input id="email" label="Email" tips="Your primary email address." pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></web-input>
+<web-input label="Email" value="invalid email" validate pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></web-input>
+<web-input label="Color" value="#000" type="color-text"></web-input>
\ No newline at end of file
diff --git a/site/Components/Loading.html b/site/Components/Loading.html
index 4692e0d..df0b9ee 100644
--- a/site/Components/Loading.html
+++ b/site/Components/Loading.html
@@ -1,14 +1,14 @@
 <div class="bg-light p-4 border">
-  <ui-loading></ui-loading>
+  <web-loading></web-loading>
   Here to show your data.
 </div>
 <br />
 <div class="bg-light p-4 border">
-  <ui-loading theme="danger"></ui-loading>
+  <web-loading theme="danger"></web-loading>
   Here to show your data.
 </div>
 <br />
 <div class="bg-light p-4 border" style="border-top-left-radius: 15px;">
-  <ui-loading theme="dark"></ui-loading>
+  <web-loading theme="dark"></web-loading>
   Here to show your data.
 </div>
\ No newline at end of file
diff --git a/site/Components/Select.html b/site/Components/Select.html
index e47c7fc..26574f3 100644
--- a/site/Components/Select.html
+++ b/site/Components/Select.html
@@ -1,11 +1,13 @@
-<ui-select options='["Option 1", "Option 2"]' value="Option 2" placeholder="Choose the item..."></ui-select>
-<ui-select label="Country" options='[
+<web-select options='["Option 1", "Option 2"]' value="Option 2" placeholder="Choose the item...">
+</web-select>
+<web-select label="Country" options='[
   {"label": "China", "value": "China", "description": "Here is the country description."},
   {"label": "Canada", "value": "Canada", "description": "Here is the country description."}
   ]' value="Canada" value-field="value"
   value-template="<img src='https://www.printableworldflags.com/icon-flags/24/{label}.png'> {label} <small class='text-muted'>{description}</small>"
-  option-template="<img src='https://www.printableworldflags.com/icon-flags/24/{label}.png'> {label} <br /> <small class='text-muted'>{description}</small>"></ui-select>
-<ui-select label="Country" options='[
+  option-template="<img src='https://www.printableworldflags.com/icon-flags/24/{label}.png'> {label} <br /> <small class='text-muted'>{description}</small>">
+</web-select>
+<web-select label="Country" options='[
   {"label": "China", "value": "China", "description": "Here is the country description."},
   {"label": "Canada", "value": "Canada", "description": "Here is the country description."},
   {"label": "Chad", "value": "Chad", "description": "Here is the country description."},
@@ -16,4 +18,5 @@
   {"label": "Kosovo", "value": "Kosovo", "description": "Here is the country description."}
   ]' value="China" value-field="value"
   disabled-field="disabled"
-  option-template="<img src='https://www.printableworldflags.com/icon-flags/24/{label}.png'> {label} <br /> <small class='text-muted'>{description}</small>" required></ui-select>
\ No newline at end of file
+  option-template="<img src='https://www.printableworldflags.com/icon-flags/24/{label}.png'> {label} <br /> <small class='text-muted'>{description}</small>" required>
+</web-select>
\ No newline at end of file
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index d56bd21..9de46e0 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,9 +1,9 @@
-import { html, customElement, property, TemplateResult } from 'lit-element';
-import { RootElement } from '../../common/RootElement';
+import { html, property, TemplateResult } from 'lit-element';
+import { RootElement, htmlElement } from '../../core';
 
-import './button.scss';
+import './style.scss';
 
-@customElement('ui-button')
+@htmlElement(`button`)
 export class Button extends RootElement {
   @property({ type: Boolean }) public pending = false;
   @property({ type: String }) public text = '';
diff --git a/src/components/button/button.scss b/src/components/button/style.scss
similarity index 91%
rename from src/components/button/button.scss
rename to src/components/button/style.scss
index b332eb0..ea64e40 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/style.scss
@@ -1,4 +1,4 @@
-ui-button {
+#{$prefix}button {
   .loading {
     display: none;
     height: 0;
diff --git a/src/components/indicator/indicator.ts b/src/components/indicator/indicator.ts
index 3476150..8af6a19 100644
--- a/src/components/indicator/indicator.ts
+++ b/src/components/indicator/indicator.ts
@@ -1,33 +1,36 @@
-import { RootElement } from '../../common/RootElement';
-import { customElement, html, property, eventOptions } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { html, property, TemplateResult } from 'lit-element';
+import { RootElement, htmlElement } from '../../core';
 
-import './indicator.scss';
+import './style.scss';
 
-@customElement('ui-indicator')
+@htmlElement(`indicator`)
 export class Indicator extends RootElement {
-
-  @property({ converter: (value, type) => {
-    const items = [];
-    const num = Number(value);
-    for (let i = 0; i < num; i++) {
-      items.push(i);
-    }
-    return items;
-  }}) public length: number[] = [];
-  @property({type: Number}) public active: number = 0;
+  @property({
+    converter: (value, type) => {
+      const items: number[] = [];
+      const num = Number(value);
+      for (let i = 0; i < num; i++) {
+        items.push(i);
+      }
+      return items;
+    },
+  })
+  public length: number[] = [];
+  @property({ type: Number }) public active = 0;
 
   public constructor() {
     super();
     this.theme = 'dark';
   }
 
-  public render() {
+  public render(): TemplateResult {
     return html`
-        ${this.length.map((index) => {
-          const classes = `bg-${this.theme} ${index === this.active ? 'active': ''}`.trim();
-          return html`<span class="${classes}" @click=${(e: any) => this.itemClick(index, e)}></span>`;
-        })}
+      ${this.length.map(index => {
+        const classes = `bg-${this.theme} ${index === this.active ? 'active' : ''}`.trim();
+        return html`
+          <span class="${classes}" @click=${(e: any) => this.itemClick(index, e)}></span>
+        `;
+      })}
     `;
   }
 
@@ -44,4 +47,4 @@ export class Indicator extends RootElement {
       this.dispatchEvent(event);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/indicator/indicator.scss b/src/components/indicator/style.scss
similarity index 96%
rename from src/components/indicator/indicator.scss
rename to src/components/indicator/style.scss
index 5fe49f8..f710075 100644
--- a/src/components/indicator/indicator.scss
+++ b/src/components/indicator/style.scss
@@ -1,4 +1,4 @@
-ui-indicator {
+#{$prefix}indicator {
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 49c83c7..b4157b2 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,11 +1,11 @@
-import { customElement, html, property, TemplateResult } from 'lit-element';
+import { html, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { RootElement } from '../../common/RootElement';
+import { RootElement, htmlElement } from '../../core';
 
-import './input.scss';
+import './style.scss';
 
-@customElement('ui-input')
+@htmlElement(`input`)
 export class Input extends RootElement {
   @property({ type: String }) label = '';
   @property({ type: String, reflect: true }) value = '';
diff --git a/src/components/input/input.scss b/src/components/input/style.scss
similarity index 97%
rename from src/components/input/input.scss
rename to src/components/input/style.scss
index 5b11f0e..9872ac2 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/style.scss
@@ -1,4 +1,4 @@
-ui-input {
+#{$prefix}input {
   .valid-feedback {
     display: block;
   }
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index fe33df1..b17a3b2 100644
--- a/src/components/loading/loading.ts
+++ b/src/components/loading/loading.ts
@@ -1,9 +1,9 @@
-import { html, customElement, TemplateResult } from 'lit-element';
-import { RootElement } from '../../common/RootElement';
+import { html, TemplateResult } from 'lit-element';
+import { RootElement, htmlElement } from '../../core';
 
-import './loading.scss';
+import './style.scss';
 
-@customElement('ui-loading')
+@htmlElement(`loading`)
 export class Loading extends RootElement {
   public constructor() {
     super();
diff --git a/src/components/loading/loading.scss b/src/components/loading/style.scss
similarity index 68%
rename from src/components/loading/loading.scss
rename to src/components/loading/style.scss
index dfa8a26..cf06930 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/style.scss
@@ -1,4 +1,4 @@
-body > ui-loading {
+body > #{$prefix}loading {
   .spinner-border {
     width: 3rem;
     height: 3rem;
diff --git a/src/components/select/select-input.ts b/src/components/select/select-input.ts
index c6cc0d9..edc8584 100644
--- a/src/components/select/select-input.ts
+++ b/src/components/select/select-input.ts
@@ -1,11 +1,9 @@
 import { classMap } from 'lit-html/directives/class-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { html, customElement, TemplateResult, property } from 'lit-element';
-import { RootElement } from '../../common/RootElement';
+import { html, TemplateResult, property } from 'lit-element';
+import { RootElement, htmlElement } from '../../core';
 
-const TAG_NAME = 'ui-select-input';
-
-@customElement(TAG_NAME)
+@htmlElement('select-input')
 export class SelectInput extends RootElement {
   @property({ type: String, reflect: true }) value: string | undefined | null;
   @property({ type: Array, reflect: true }) options = [];
@@ -118,14 +116,14 @@ export class SelectInput extends RootElement {
       if (this.valueField) {
         value = option[this.valueField];
       } else {
-        throw new Error(`No value-field attribute found for ${TAG_NAME} element.`);
+        throw new Error(`No value-field attribute found for ${this.tagName} element.`);
       }
 
       if (!text) {
         if (this.textField) {
           text = option[this.textField];
         } else {
-          throw new Error(`No text-field attribute found for ${TAG_NAME} element.`);
+          throw new Error(`No text-field attribute found for ${this.tagName} element.`);
         }
       }
     }
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e47ee88..11d3fa4 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,11 +1,10 @@
-import { html, customElement, TemplateResult, property } from 'lit-element';
+import { html, TemplateResult, property } from 'lit-element';
 import { SelectInput } from './select-input';
+import { htmlElement } from '../../core';
 
-import './select.scss';
+import './style.scss';
 
-const TAG_NAME = 'ui-select';
-
-@customElement(TAG_NAME)
+@htmlElement(`select`)
 export class Select extends SelectInput {
   @property({ type: String }) label = '';
 
diff --git a/src/components/select/select.scss b/src/components/select/style.scss
similarity index 97%
rename from src/components/select/select.scss
rename to src/components/select/style.scss
index eade94e..fb7646b 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/style.scss
@@ -1,4 +1,4 @@
-ui-select {
+#{$prefix}select {
   position: relative;
   display: block;
 
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..f01ec5b
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+const elementPrefix = 'web-';
+const eventPrefix = 'on-';
+module.exports = { elementPrefix, eventPrefix };
diff --git a/src/common/RootElement.ts b/src/core/RootElement.ts
similarity index 98%
rename from src/common/RootElement.ts
rename to src/core/RootElement.ts
index 2acfab0..bfd2d00 100644
--- a/src/common/RootElement.ts
+++ b/src/core/RootElement.ts
@@ -8,6 +8,7 @@ export abstract class RootElement extends LitElement {
 
   public constructor() {
     super();
+    this.classList.add(this.tagName);
   }
 
   protected createRenderRoot(): RootElement {
diff --git a/src/core/config.ts b/src/core/config.ts
new file mode 100644
index 0000000..c3f3d8e
--- /dev/null
+++ b/src/core/config.ts
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+import * as config from '../config.js';
+export const ELMENT_PREFIX = config.elementPrefix;
+export const EVENT_PREFIX = config.eventPrefix;
diff --git a/src/core/htmlElement.ts b/src/core/htmlElement.ts
new file mode 100644
index 0000000..dd1fc8b
--- /dev/null
+++ b/src/core/htmlElement.ts
@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { customElement } from 'lit-element';
+import { ELMENT_PREFIX } from './config';
+
+export const htmlElement: any = (tagName: string): any => {
+  return customElement(`${ELMENT_PREFIX}${tagName}`);
+};
diff --git a/src/core/index.ts b/src/core/index.ts
new file mode 100644
index 0000000..847219d
--- /dev/null
+++ b/src/core/index.ts
@@ -0,0 +1,3 @@
+export * from './config';
+export * from './RootElement';
+export * from './htmlElement';
diff --git a/src/index.scss b/src/index.scss
index eb490dd..2be611c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,4 +7,4 @@ body {
 
 :root {
   --hover-bg-color: #efefef;
-}
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 1a1fcd7..e3f0a0b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "strict": true,
     "jsx": "react",
     "sourceMap": true,
+    "noImplicitAny": false,
     "declaration": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,