Style attributes not rendered when values are set programmatically

[oyvindeh]

I am trying to render a style attribute, but it does not show up.

Code similar to the following works in hyperHTML, but not in viperHTML (using Hypermorphic):

const css = { width: "10%" };
bind`<div style="${css}"></div>`;

Expected: <div style="width: 10%"></div>

Actual: <div></div>

[oyvindeh]

I tried upgrading to 2.12.0, but I still can't get it to work.

[WebReflection]

this test should grant it works: https://github.com/WebReflection/viperHTML/blob/master/test/test.js#L24-L28

are you sure you are using latest?

[WebReflection]

I've also just tried:

tressa.assert(
  viperHTML.bind({})`<div style="${{width: '10%'}}"></div>` ==
  '<div style="width:10%;"></div>',
  'style as object'
);

and it produces the right result. You might want to update hypermorphic too.

[WebReflection]

also just tried this and it works as expected:

require('hypermorphic').bind({})`<div style=${{width:10}} />`.toString();

[oyvindeh]

Your last example does indeed work in the Node repl. However, I have no luck when binding to an element rendered by BasicHTML.

Elaborated example:

import { document } from 'global';
import { hyper } from 'hypermorphic';

document.body.innerHTML = '<div class="foo"></div>';
const elem = document.querySelector('.foo');

hyper(elem) `<div style="${{ width: '10%' }}" />`;
console.log(elem.innerHTML); // => <div></div>

Rendering a string instead of an object works:

hyper(elem) `<div style="width: 10%" />`;
console.log(elem.innerHTML); // => <div style="width: 10%"></div>

Perhaps the problem is somewhere else than in ViperHTML? (Hopefully my setup is correct.)

I use Hypermorpic@0.4.0, ViperHTML@2.12.0, BasicHTML@0.14.0 and Global@4.3.2. I should add that I use Babel, TypeScript and WebPack as well (babel-core@7.0.0-bridge.0, babel/preset-typescript@7.0.0-beta.46, typescript@2.8.3, webpack@4.7.0). Node version is 9.8.0.

[WebReflection]

You mention basicHTML only now ... if you have a global document then hypermorphic returns hyperHTML and not viperHTML.

What you want with BasicHTML is indeed hyperHTML but I guess basicHTML doesn't have any special meaning for style.

I will eventually check in there what's going on but the TL;DR version is that if you use basicHTML to render layouts all you need is hyperHTML instead of hypermorphic.

[WebReflection]

this is what is hypermorphic is all about: https://github.com/WebReflection/hypermorphic/blob/master/index.js

[oyvindeh]

Thanks, I've replaced hypermorphic with HyperHTML. (The style property problem persists though, as expected.)

[WebReflection]

@oyvindeh basicHTML 0.15.0 brings in special HTMLElement style attribute and works now with hyperHTML style objects too.

[oyvindeh]

Thanks a lot, works great!