Raw HTML
See original GitHub issuevirtual-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:
- Created 7 years ago
- Comments:14 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I do it simply by using
h('div', { props: { innerHTML: "..." }})
Along these lines, I’ve been working on a library to convert HTML strings to
VNode
s: https://github.com/appcues/snabbdom-virtualize.