stylesheet link created via innerHTML doesn't respect cascading order

Confirmed Issue #10472273 • Assigned to Francois R.

Details

Author
valdrin k.
Created
Jan 9, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I have a page with one <style>, and I generate a <link rel=stylesheet> programmatically, appending it as previous sibling of <style> after an arbitrary time.

  <style id="target">
    body { background-color: orange; }
  </style>

  Background color should remain orange, text should become white.

  <script>
    setTimeout(function() {
      var target = document.getElementById('target');
      var link = generateLink(); // it is <link rel="stylesheet" href="style.css">
      target.parentNode.insertBefore(link, target);
    }, 1000);
  </script>
</body>

<!-- style.css -->
body {
  background-color: green;
  color: white;
}

If I generate the link via innerHTML, the cascading order is not maintained (the background color becomes green, while it should remain orange):

function generateLink() {
  var div = document.createElement('div');
  div.innerHTML = '<link rel="stylesheet" href="style.css">';
  return div.firstElementChild;
}

If instead I programmatically generate a link and set its attributes, I don’t face the problem

function generateLink() {
  var newLink = document.createElement('link');
  newLink.setAttribute('href', 'style.css');
  newLink.setAttribute('rel', 'stylesheet');
  return newLink;
}

This happens both in IE 11 and MSEdge.

Attachments

0 attachments

    Comments and activity

    • The problem seems to happen to links being appended at least once. e.g.

      function generateLink() {
        var newLink = document.createElement('link');
        newLink.setAttribute('href', 'style.css');
        newLink.setAttribute('rel', 'stylesheet');
      
        // Appending as child causes the issue
        document.createElement('div').appendChild(newLink);
        // It doesn't help to remove it from the parent.
        newLink.parentNode.removeChild(newLink);
      
        return newLink;
      }
      

      Any advice on how to work around this issue?

    • Microsoft Edge Team

      Changed Assigned To to “Francois R.”

      Changed Status to “Confirmed”

    • Are you by chance adding the stylesheet in the body element? I think there is a bug where stylesheets inserted in the body are not inserted properly because only stylesheets in the head are properly considered to find out the insertion point.

      If that is the issue, the fix would be to add the stylesheet to the head. Another option would probably be to change an existing stylesheet and add an @import rule in it to import your new stylesheet in an older one.

    You need to sign in to your Microsoft account to add a comment.

    Sign in