Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

document.all during page load contains styles after current script #733

Closed
myfonj opened this issue Jun 24, 2019 · 2 comments
Closed

document.all during page load contains styles after current script #733

myfonj opened this issue Jun 24, 2019 · 2 comments
Labels
works as intended

Comments

@myfonj
Copy link

myfonj commented Jun 24, 2019

Per spec of document.all using construction like <script>document.write(document.all[document.all.length-1].tagName)</script> should write SCRIPT being at that very moment the last element in DOM.

In current Stylus I got the last injected style instead.

It is just another result of DOM injection I've ran into, this time during own JS mischief, hopefully not very probable to occur in real world. Not complaining, just leaving for reference. Looking forward injections will be matter of distant past (again).

  • Browser: Firefox
  • Operating System: Win10
  • Stylus Version: 1.5.3
  • URL: (example) https://myfonj.github.io/tst/document-all-test.html
  • Screenshots:
    • How it looks with some enabled style:
      • image
    • How it should look (and how it looks without userstyle OR when page does not link any author stylesheet):
      • image
  • source:
<!DOCTYPE html>
<title>document.all test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script>
document.write(document.all[document.all.length-1].outerHTML.replace(/</g,'&lt;'))
// you should see this script
</script>
@Mottie
Copy link
Member

Mottie commented Jun 24, 2019

I don't think there's anything different we'd do here.

Initially we inject the style within the <head> so there isn't a FOUC. Then after the page loads, we move that style block after the closing body tag (</body>). Doing this increases the style's CSS precedence so you shouldn't have to add an !important flag after every definition.

So, yeah if you have Stylus injecting CSS, the stylesheet(s) will end up as the last element in the document.all list. And I honestly I don't know if and when CSS injection will ever get implemented (see #248).

@eight04
Copy link
Collaborator

eight04 commented Jun 25, 2019

The last element in DOM !== the last tag in source. You should notice that DOM can be dynamically modified by JS, especially the document root, body, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
works as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Mottie @eight04 @myfonj @narcolepticinsomniac