The element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Tips and Notes
Tip: Also look at the element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.
Tip: If you want to learn more about JavaScript, visit our JavaScript Tutorial.
Browser Support
Element Yes Yes Yes Yes Yes
Attributes
Attribute Value Description async async Specifies that the script is downloaded in parallel to parsing the page, and executed as soon as it is available [before parsing completes] [only for external scripts] crossorigin anonymous use-credentials Sets the mode of the request to an HTTP CORS Request defer defer Specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing [only for external scripts] integrity filehash Allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated nomodule True False Specifies that the script should not be executed in browsers supporting ES2015 modules referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url Specifies which referrer information to send when fetching a script src URL Specifies the URL of an external script file type scripttype Specifies the media type of the script
Differences Between HTML and XHTML
In XHTML, the content inside scripts is declared as
PCDATA [instead of CDATA], which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
What I found is that if you import "index.css"
and modify the index.css
file HMR does work properly. This has two obvious problems though:
import "index.css"
auto injects the css into thedocument.head
which is undesirable because we want it to only apply to the shadow root.- If you're using tailwindcss you aren't directly modifying the
index.css
file, so the HMR won't actually trigger.
However, it is enough to get a little hack going. In my app i'm using svelte in the content script that is mounted in a closed shadow root. Ignoring the mounting code, I have a svelte component that looks something like
import css from "./../app.css?inline";
let styleTag = ${css}
;
// WARNING: This is a hack import "./../app.css"; let tag = document.querySelector['[data-vite-dev-id]'] if[tag instanceof HTMLStyleElement] {
tag.media = 'max-width: 0px';
styleTag = `${tag.innerText}`;
}
{@html styleTag}
hello world
Okay so to solve the first issue, I find the style tag that vite injects into the head, and I nullify it's effects on the page by setting styletag.media = 'max-width: 0px'
this scopes the innerText of the tag to only apply when the browser has zero width, so basically always disabled. Then I create a style tag with the same contents as the one vite injected into the document.head, then svelte puts it in the shadow root via the {@html styleTag}
. This can be pretty trivially adopted for react or w/e framework.
Then for the second issue, I create a VIM autocmd autocmd BufWritePost * silent! !touch src/app.css
which does a zero edit change to the css via touch
any time any file in my project is written. If you aren't a VIM user, i'm sure there is something equivalent in VSCode.
It's obviously not ideal, but it gets HMR working with shadow root CSS with Tailwind in development which is good enough for me for now.