POC #5944: Just use shadow DOM instead of iframes #7616
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. Open https://npm.runkit.com/postcss-remtopx 2. Paste this 3. Run it ```js const fetch = require("node-fetch@2.7.0"); const postcss = require("postcss"); const postcssRem = require("postcss-remtopx"); const bootstrapCssUrl = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"; async function fetchBootstrapCss() { console.log('Fetching bootstrap') const response = await fetch(bootstrapCssUrl); const bootstrapCssContent = await response.text(); console.log('processing') const result = await postcss([postcssRem]).process(bootstrapCssContent); console.log(result.css) } fetchBootstrapCss(); ```
fregante
added
user experience
fregante
requested review from
grahamlangford,
BLoe and
twschiller
and removed request for
grahamlangford and
BLoe
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| @@ -20,7 +20,7 @@ | |||
| <head> | |||
| <!--Uncomment this script tag to enable the React Dev Tools app--> | |||
| <!--See https://github.com/pixiebrix/pixiebrix-extension/wiki/Development-commands#react-dev-tools --> | |||
| <!-- <script src="http://localhost:8097"></script> --> | |||
| <script src="http://localhost:8097"></script> | |||
Check warning
Code scanning / CodeQL
Inclusion of functionality from an untrusted source Medium
|
Closing as iframed documents might be the way forward for PB: However I'll likely still replace the rem/px replacement later on |
3 tasks
This was referenced Apr 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
This was discussed a few times before: we use iframes because Bootstrap uses REM units, and the host page's
font-sizeaffects them.This issue can be resolved at the root, by just altering Bootstrap's theme to use pixels. This is done once and lasts forever.
REM brings no advantage here, it only leads us to make the app more complex with many iframed documents and unnecessary messaging.
Demo (before/after)
Screen.Recording.mov
Drawbacks
External content, if any, will be affected by the host's CSP. Do you know if anyone is loading images in these iframes? We can actually detect them and loading them via
fetchif desired.I think the UX/DX improvement for everyone would still be worth the change.
Review tips
The code is hacky, not meant to be merged
Checklist
src/tsconfig.strictNullChecks.json(if possible)