Add unescape method and span for content styled with CSS

Author: JosefJezek

README.md

@@ -1,19 +1,64 @@
-# `<s-html>`
+# &lt;s-html&gt;
 
-Element wrapper for html data binding.
+Element wrapper of `.innerHTML` for data binding with HTML elements.
 
 ## Usage
 
-`locales.json`
+### Example 1
+
+Localize text with HTML elements using [app-localize-behavior](https://github.com/PolymerElements/app-localize-behavior).
+
+locales.json
 ```json
 {
-"text": "<br />Test<br />"
+"text": "<a href=\"/settings\">Settings</a>"
 }
 ```
 
-`<div><s-html html="[[localize('text')]]"></s-html></div>`
+HTML
+```html
+<s-html html="[[localize('text')]]"></s-html>
+```
+
+### Example 2
+
+Using `span` element for content styled with CSS.
+
+locales.json
+```json
+{
+"text": "<a class=\"red\" href=\"/settings\">Settings</a>"
+}
+```
 
-## Install
+CSS
+```css
+.red {
+  color: red;
+}
+```
+
+HTML
+```html
+<s-html html="[[localize('text')]]"><span></span></s-html>
+```
+
+### Example 3
+
+Unescape escaped HTML elements.
+
+locales.json
+```json
+{
+"text": "polymer &lt;br&gt;"
+}
+```
+
+HTML
+```html
+<s-html unescape html="[[localize('text')]]"></s-html>
+```
 
-`bower i StartPolymer/s-html -S`
+## Installation
 
+`bower i s-html -S`

bower.json

@@ -1,15 +1,17 @@
 {
   "name": "s-html",
-  "version": "0.1.2",
-  "description": "Element wrapper for html data binding.",
+  "version": "0.1.3",
+  "description": "Element wrapper of `.innerHTML` for data binding with HTML elements.",
   "authors": [
     "The StartPolymer Project Authors (https://github.com/StartPolymer/authors)"
   ],
   "keywords": [
     "web-components",
     "polymer",
     "html",
-    "data-binding"
+    "data-binding",
+    "unescape",
+    "innerHTML"
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0"

s-html.html

@@ -19,6 +19,8 @@
 
 </style>
 
+<content select="span"></content>
+
 </template>
 <script>
 
@@ -27,14 +29,41 @@
   is: 's-html',
 
   properties: {
+    /**
+     * Text with HTML elements.
+     */
     html: {
       type: String,
       observer: '_htmlChanged'
+    },
+
+    /**
+     * Set to true for unescape escaped HTML (e.g. "&lt;br&gt;"), we get ("<br>").
+     */
+    unescape: {
+      type: Boolean,
+      value: false
     }
   },
 
   _htmlChanged: function(html) {
-    Polymer.dom(this.root).innerHTML = html;
+    var child = Polymer.dom(this).queryDistributedElements('span')[0];
+
+    if (this.unescape) {
+      html = this._unescapeHtml(html);
+    }
+
+    if (child) {
+      Polymer.dom(child).innerHTML = html;
+    } else {
+      Polymer.dom(this.root).innerHTML = html;
+    }
+  },
+
+  _unescapeHtml: function(html) {
+    var textarea = document.createElement('textarea');
+    textarea.innerHTML = html;
+    return textarea.textContent;
   }
 
 });