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.

Template String Conversion into HTML Nodes drops <style> Nodes

See original GitHub issue

This 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:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
cferdinandicommented, Oct 26, 2019

Ah yep… here we go: https://codepen.io/cferdinandi/pen/rNNwMeE

I see it now.

0reactions
semmelcommented, Dec 2, 2019

@cferdinandi

Sorry took me a bit to get to this …

No need to apologise, Open Source projects should be fun first - obligations last! 😄

Read more comments on GitHub >

github_iconTop 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 >

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