Attribute to set innerHTML of element?

[bryceosterhaus]

Hey, I was wondering if there is any out of the box support for setting unescaped html content in side of another element.

React's JSX supports this by using an attribute called dangerouslySetInnerHTML.

For our specific use case, we have been calling incrementalDOM directly by doing something like this

render() {
  IncrementalDOM.elementOpen('div', null, null, 'class', 'my-html-string-container');
  const node = IncrementalDOM.elementClose('div');
  node.innerHTML = '<div class="my-html-string">Hello World!</div>';
  return node;
}

Ideally, we would hope to do something like

render() {
    const someHTML = '<div class="my-html-string">Hello World!</div>';

    return <div class="my-html-string-container" setInnerHTML={someHTML} />;
}

Is this something you would consider adding to this plugin itself, or do you think it is best to handle ourselves for this specific use case?

Reference to the issue we are trying to fix https://github.com/metal/metal.js/issues/127

[jridgewell]

This should be setup through iDOM's attributes map. Basically, just set innerHTML (or whatever you want to name it) to set as a property.

import { attributes } from 'incremental-dom';
attributes.innerHTML = function(el, property, value) {
  el.innerHTML = value;
};

// or
attributes.dangerouslySetInnerHTML = function(el, property, value) {
  el.innerHTML = value;
};

Eventually, iDOM will allow you to specify at the compiler level what gets set as a property or attribute, and we'll be able to handle it here.

[bryceosterhaus]

Thanks for the quick input! Good to know.

[bryceosterhaus]

@jridgewell are you sure this works for innerHTML? Just tried on this fiddle and it doesn't seem to work as expected. Although it does work if I set it to an attribute like title.

[jridgewell]

Oh, you'll have to skip the node, too.

[bryceosterhaus]

How does that work with subsequent patches? I tested it here and it seems to clear that innerHTML value after the first patch.

Also, I realize this doesn't actually impact this plugin anymore since it is iDOM specific. So I can move my questions over there if need be.

[jridgewell]

See https://github.com/google/incremental-dom/issues/283 for more context.