Introducing an HTMLElement widget for more flexibility.

ipywidgets/widgets/__init__.py

@@ -18,7 +18,7 @@
 from .widget_output import Output
 from .widget_selection import RadioButtons, ToggleButtons, ToggleButtonsStyle, Dropdown, Select, SelectionSlider, SelectMultiple, SelectionRangeSlider
 from .widget_selectioncontainer import Tab, Accordion, Stacked
-from .widget_string import HTML, HTMLMath, Label, Text, Textarea, Password, Combobox
+from .widget_string import HTML, HTMLElement, HTMLMath, Label, Text, Textarea, Password, Combobox
 from .widget_controller import Controller
 from .interaction import interact, interactive, fixed, interact_manual, interactive_output
 from .widget_link import jslink, jsdlink

ipywidgets/widgets/widget_string.py

@@ -40,6 +40,19 @@ class HTML(_String):
     _view_name = Unicode('HTMLView').tag(sync=True)
     _model_name = Unicode('HTMLModel').tag(sync=True)
 
+
+@register
+class HTMLElement(_String):
+    """Renders the string `value` as HTML."""
+    _view_name = Unicode('HTMLElementView').tag(sync=True)
+    _model_name = Unicode('HTMLElementModel').tag(sync=True)
+    tagname = Unicode(None, allow_none=True, help="HTML tag name").tag(sync=True)
+
+    def __init__(self, tagname=None, **kwargs):
+        self.tagname = tagname
+        super().__init__(**kwargs)
+
+
 @register
 class HTMLMath(_String):
     """Renders the string `value` as HTML, and render mathematics."""

packages/controls/src/widget_string.ts

@@ -35,13 +35,6 @@ export class StringView extends DescriptionView {
     this.el.classList.add('widget-inline-hbox');
   }
 
-  /**
-   * Update the contents of this view
-   *
-   * Called when the model is changed.  The model may have been
-   * changed by another view or by a state update from the back-end.
-   */
-
   content: HTMLDivElement;
 }
 
@@ -92,6 +85,56 @@ export class HTMLView extends StringView {
   content: HTMLDivElement;
 }
 
+export class HTMLElementModel extends StringModel {
+  defaults(): Backbone.ObjectHash {
+    return _.extend(super.defaults(), {
+      _view_name: 'HTMLElementView',
+      _model_name: 'HTMLElementModel',
+      tagname: null
+    });
+  }
+}
+
+export class HTMLElementView extends DescriptionView {
+  /**
+   * Called when view is rendered.
+   */
+  render(): void {
+    super.render();
+    this.el.classList.add('jupyter-widgets');
+    this.el.classList.add('widget-inline-hbox');
+    this.el.classList.add('widget-html');
+    this.content = document.createElement('span');
+    this.content.classList.add('widget-html-content');
+    this.el.appendChild(this.content);
+    this.update(); // Set defaults.
+  }
+
+  /**
+   * Update the contents of this view
+   *
+   * Called when the model is changed.  The model may have been
+   * changed by another view or by a state update from the back-end.
+   */
+  update(): void {
+    this.content.outerHTML = this.model.get('value');
+    return super.update();
+  }
+
+  /**
+   * Handle message sent to the front end.
+   */
+  handle_message(content: any): void {
+    if (content.do === 'focus') {
+      this.content.focus();
+    } else if (content.do === 'blur') {
+      this.content.blur();
+    }
+  }
+
+  content: HTMLElement;
+}
+
 export class HTMLMathModel extends StringModel {
   defaults(): Backbone.ObjectHash {
     return _.extend(super.defaults(), {

tests/test_imagemap.ipynb

@@ -10,6 +10,19 @@
     "from ipyevents import Event"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "e = HTMLElement('p')\n",
+    "e.value = \"<p>ok</p>\"\n",
+    "e.layout.border = \"1px solid red\"\n",
+    "e.__dict__\n",
+    "e"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -21,7 +34,7 @@
     "b1 = Button(description=\"Button\")\n",
     "h2 = HTML('Event info')\n",
     "i = Image()\n",
-    "i.value=open(\"flocon.png\", 'rb').read()\n",
+    "i.value=open(\"magician-penguin-hi.png\", 'rb').read()\n",
     "evt1 = Event(source=l1, watched_events=['click'])\n",
     "evt2 = Event(source=b1, watched_events=['click'])\n",
     "def handle_evt(e):\n",