thomaspark / scoper Goto Github PK
View Code? Open in Web Editor NEWA polyfill for scoped HTML styles elements
License: MIT License
A polyfill for scoped HTML styles elements
License: MIT License
Again, in Chrome/Vivaldi, using ":root" selector doesn't seem to have any effect
It is important, because you'd want to use ":root" or "html" to specify font-size and use "rem" size units
scoper.js attempts to wrap elements where the scoped style element is a direct descendant, which effectively eliminates the applicability of the style content. I think it's fairly safe to just leave these style elements as is since they apply to the whole body.
I know this is an unusual case with an obvious manual workaround, but I'm auto generating the html and I don't always know where the scoped styles are going to be placed in the document.
The error ReferenceError: document is not defined
shows when I tried to use it in the node environment.
Maybe we can add a null check before calling document.createElement
?
I've been using scoper and it has been working well. But today I got a strange behavior that breaks the code. I have:
<a href="'+pagelink+'" target="_blank"> <img src="'+imgpath+'" class="extLinkImg"> <style scoped> .extLinkImg { width: 35px; height: 35px; margin:10px; } <\style> </a>
And I see in the console that what is being put in the head <style> is:
#scoper-2 .extLinkImg { width: 35px; height: 35px; margin:10px; } <style> </a>
It seems that scoper is not seeing the ending / in the closing tag...
I tried the same code inside a wrapping div and is the same. Do you have any clue why this is happening?
Chrome:
"Mixed Content: The page at 'https://fiddle.jshell.net/rpe402LL/17/show/' was loaded over HTTPS, but requested an insecure script 'http://thomaspark.github.io/scoper/scoper.min.js'. This request has been blocked; the content must be served over HTTPS."
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.