Dynamically added eqcss styles to the DOM don't apply to target elements
ahmetsali opened this issue · comments
Hi, elements queries are great! I am developing WordPress themes and in WordPress Live Customizer we basically append CSS styles (with style tag) dynamically to the dom and of course elements get affected immediately without needing a page refresh. However, this doesn't seem to work with eqcss styles added dynamically to the dom;
<script type=text/eqcss>
@element .box {
:self {
padding: 12ew;
}
}
</script>
adding this to the dom dynamically doesn't change any styles on the target element (.box)
can this be solved naturally or do I have to use eval() for dynamic properties and make things more complicated?
Thanks.
Hi @ahmetsali, thanks for the question - I can see two ways you can load EQCSS styles any time after the page has loaded, the method you use depends on whether you want (or need) to put the EQCSS syntax into the document directly, or if you can use the plugin to parse and load the styles directly without needing to even add the EQCSS custom syntax to the page.
Loading styles with EQCSS.load()
The first technique would involve adding EQCSS custom syntax to either a <style> tag, or <script type=text/eqcss> tag in the document somewhere. If you have added new EQCSS custom syntax and want the EQCSS plugin to become aware of it, you need to run EQCSS.load(). Here's a demo:
<body>
<script src=http://elementqueries.com/EQCSS.js></script>
<script>
setTimeout(() => {
let styles = `
@element body and (min-width: 800px) {
:self {
background: lime;
}
}
`
let tag = document.createElement('style')
tag.innerHTML = styles
document.body.appendChild(tag)
EQCSS.load()
}, 1000)
</script>This method only requires you to run EQCSS.load() some time after the document loads, after the new EQCSS styles have been added.
You wouldn't have a setTimeout() I just added that so EQCSS had a chance to run once before we started to add the styles (you said you're adding them to a page that's already loaded).
Loading Styles with EQCSS.parse() and EQCSS.register()
The second way you can load EQCSS custom syntax is a little cleaner, rather than calling EQCSS.load() which looks for new syntax to read and then passes it to EQCSS.parse() for processing, if you have the EQCSS you want to load into the plugin you can skip adding it to the document and run it through EQCSS.parse() instead and it gives you back the same JS object that you see loaded in in EQCSS.data on a page where EQCSS is running. If you have a parsed EQCSS object like that you can give it to EQCSS.register() which will register the stylesheet with the plugin.
<script src=http://elementqueries.com/EQCSS.js></script>
<script>
let styles = `
@element body and (min-width: 800px) {
:self {
background: lime;
}
}
`
let parsedStyles = EQCSS.parse(styles)
EQCSS.register(parsedStyles)
</script>In this demo we have the EQCSS stylesheet as a string and we run that through EQCSS.parse() to parse it into an object, and EQCSS.register() to load it into the plugin. The same demo could also be written as:
EQCSS.register(EQCSS.parse(`
@element body and (min-width: 800px) {
:self {
background: lime;
}
}
`))Hopefully that clears up a couple of ways you can load in EQCSS queries any time after the page has loaded :D I'm really glad I added EQCSS.register() for this purpose, it's a relatively newer feature and made exactly for what you're trying to do!
Hope you have a wonderful day, and please let me know if you need any more explanation or demo code
Hi again @tomhodgins , both method works great, I think I will go with #2. Now I can code element-first CSS, thanks for this great plugin!
Have a wonderful day, too!