Modifying <style> does not affect getComputedStyle

[denis-sokolov]

<style> element affects styles only when inserted to DOM:

$('<style>').html('div { color: green }').appendTo('head');
console.log($('div').css('color'); // green

But not when its contents are updated:

var st = $('<style>').appendTo('head');
st.html('div { color: green }')
console.log($('div').css('color'); // NOT green

jQuery is unrelated, effect confirmed with window.getComputedStyle.

[Sebmaster]

I think this would be fixed by Sebmaster@637aca4. Can you cherry-pick that commit and try with that @denis-sokolov?

[denis-sokolov]

The commit referenced is about a DOMNodeInserted event.
Perhaps I was unclear, but when one inserts a <style> node, it is already applied to the styles.
It's when one mutates the contents of a <style> node, the styles are not recomputed.

[mciparelli]

I suppose the very same function using DOMSubtreeModified event should work?

[mciparelli]

Nah, I was wrong. @denis-sokolov DOMNodeInserted is fired and solves this problem because there is a text node being inserted into the stylesheet, thus firing the event in the stylesheet element.

[Sebmaster]

@mciparelli Thanks for testing it out.

DOMNodeInserted might be correct in this case, however what if someone inserts the textnode into the style-tag and then modifies textContent/nodeValue of the textNode? I guess that wouldn't be cought by DOMNodeInserted.

[mciparelli]

I'm getting DOMNodeInserted fired in the stylesheet when:

style.textContent = 'whatever';

and DOMCharacterDataModified when:

style.firstChild.textContent = 'whatever';

[mciparelli]

It should be fine with your commit. I don't see anyone using the latter for modifying a stylesheet contents.

[mihalik]

I'm curious about the status of this issue and the above fix. I have some code that modifies stylesheets that I was trying to test and ran into this issue. I have tested the code linked above and it catches my modifications that use styleElement.textContent = sheetText.

[domenic]

We want a comprehensive fix that also deals with styleElement.firstChild.textContent = sheetText. @Sebmaster is busy this month with university but if someone wants to take his patch and adapt it into a full PR with tests and also handling that edge case, I'd be happy to review.

[domenic]

The modern way to listen for text content changes is to add a _modified() { } hook, if anyone wants to pick this up.