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

Use iframe for widget #105

Closed
3 tasks done
djyde opened this issue May 16, 2021 · 3 comments
Closed
3 tasks done

Use iframe for widget #105

djyde opened this issue May 16, 2021 · 3 comments

Comments

@djyde
Copy link
Owner

djyde commented May 16, 2021 •
edited
Loading

Working on branch iframe

Benefit of using iframe

  • We don't need to write scoped css
  • user's stylesheet won't affect widget's style
  • We can use TailwindCSS

Breaking change

  • User cannot use css variables to override default style.

Roadmap

  • rewrite the core
  • rewrite the stylesheet
    • Dark mode
@djyde
Copy link
Owner Author

djyde commented May 20, 2021

Released on 1.2.1

@djyde djyde closed this as completed May 20, 2021
@abdusco
Copy link

abdusco commented May 21, 2021

@djyde Regarding the breaking change: User can supply his own css with an attribute on <iframe> element:

<iframe src="iframe.html" data-css="overrides.css" frameborder="0"></iframe>

then iframe can read this url and inject it to its own <head> at runtime.

<script>
  const overridesCssUrl = window.frameElement.dataset.css;

  if (
    overridesCssUrl !== undefined &&
    !document.head.querySelector("#overrides")
  ) {
    const style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = overridesCssUrl;
    style.id = "overrides";
    document.head.append(style);
  }
</script>

here's a working example

https://codesandbox.io/s/iframe-css-overrides-00xku

@candideu
Copy link
Contributor

@djyde Regarding the breaking change: User can supply his own css with an attribute on <iframe> element:

<iframe src="iframe.html" data-css="overrides.css" frameborder="0"></iframe>

then iframe can read this url and inject it to its own <head> at runtime.

<script>
  const overridesCssUrl = window.frameElement.dataset.css;

  if (
    overridesCssUrl !== undefined &&
    !document.head.querySelector("#overrides")
  ) {
    const style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = overridesCssUrl;
    style.id = "overrides";
    document.head.append(style);
  }
</script>

here's a working example

https://codesandbox.io/s/iframe-css-overrides-00xku

How could one go about overriding Cusdis's CSS if they're using the hosted version?

@candideu candideu mentioned this issue Aug 31, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@djyde @abdusco @candideu