Template String Conversion into HTML Nodes drops <style> Nodes
See original GitHub issueThis is due to DOMParser.parseFromString(template)
puts any <style>
tags into the <head>
of the returned document. When Reef’s internal stringToHTML
function returns doc.body
the markup in the head is lost.
Test case: https://codepen.io/semmel-semmel/pen/LYYLPym
When clicking the button reefApp.setData
will update the custom element’s dom, however it looses the inline styles inside the web component, because stringToHTML
drops all <style>
nodes. Thus text looses it’s colour.
A fixed in stringToHTML
could be
// ...
// If DOMParser is supported, use it
if (support) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
doc.body.prepend(...doc.head.childNodes); // <--- Added this line
return doc.body;
}
//...
Does this make sense?
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded ...
Read more >Convert String to DOM Nodes - David Walsh Blog
My original post featured DOMParser , a JavaScript API for converting HTML strings into DOM nodes. While DOMParser works well in most cases, ......
Read more >Get DOM nodes using jQuery, then output them to comma ...
Convert the resulting array into a string delimited by a comma and space: $.map($(document).find('*').not('style, script').
Read more >Understanding Template Literals in JavaScript - DigitalOcean
In this article, you will go over the differences between single/double-quoted strings and template literals, running through the various ways ...
Read more >Converting a string into markup with vanilla JS - Go Make Things
First, let's create a helper function that will accept a string and return HTML. /** * Convert a template string into HTML DOM...
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
Ah yep… here we go: https://codepen.io/cferdinandi/pen/rNNwMeE
I see it now.
@cferdinandi
No need to apologise, Open Source projects should be fun first - obligations last! 😄