question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

virtual-dom allows to embed HTML through innerHTML attribute

h("div", {innerHTML: `<a href="https://github.com/Paqmind/memory-game" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>`})

This is critical for SVG and stuff like that which are extremely painful to convert to hyperscript and support after that. It’s much better to keep them as raw HTML. Is it possible to add such feature to snabbdom?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:14 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
kay999commented, Apr 24, 2016

I do it simply by using

h('div', { props: { innerHTML: "..." }})

1reaction
raydcommented, May 6, 2016

Along these lines, I’ve been working on a library to convert HTML strings to VNodes: https://github.com/appcues/snabbdom-virtualize.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Determining what is RAW html - HTML & CSS - SitePoint Forums
I would think raw html means just the html tags and content. That would exclude the style attribute you have there.
Read more >
asp.net mvc 3 - What does HTML.Raw do? - Stack Overflow
Raw allows you to output text containing html elements to the client, and have them still be rendered as such. Should be used...
Read more >
Raw HTML object
Raw HTML page ... This is a page in which the *entire* contents of the page is managed by you and does not...
Read more >
What are the raw HTML view and the Styled view - YouTube
In this video, we're showing you how to better edit your translations that contain HTML tags thanks to the HTML raw view and...
Read more >
Raw HTML · Styleguide Markdown
Please prefer standard Markdown syntax wherever possible and only use HTML if you can't accomplish the goal with the Markdown syntax! Raw HTML...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found