Comments (10)
Would this help to fix the readme issue?
Yeah probably the list in Limitations
would be updated.
from resize-observer.
Hi @trusktr can you expand on this a bit?
- Do you mean when
<style/>
tag content changes it triggers an update? Or, - Do you mean when an external stylesheet changes, it does not update?
from resize-observer.
Both, but actually there's a few ways to trigger style changes. F.e.:
- Changes to
<style>
's DOM (which results in changing the CSS OM).MutationObserver
can detect this. - Changes to CSS OM in
document.styleSheets
(or any<style>
or<link>
element's.sheet
property). These changes do not change DOM content, so are not detectable byMutationObserver
. For example, try running the following in devtools while here on GitHub:document.querySelector('link[rel=stylesheet]').sheet.addRule('body', 'background: red')
new CSSStyleSheet
s can be added todocument.adoptedStyleSheets
new CSSStyleSheet
s can be added to theadoptedStyleSheets
of any shadow root
Top level MutationObserver
can't observe anything in ShadowRoot
s. We'd need to monkey-patch attachShadow
to make that work, so that we can add a MutationObserver
per each ShadowRoot
.
I've been thinking about similar things over at lume/lume#159. I'll eventually get to it.
from resize-observer.
So to improve the readme - changes could be made to say what the polyfill does not detect. Then it is safe to assume any other modifications which could alter an elements size, will trigger a notification.
Would this help to fix the readme issue?
from resize-observer.
Shadow DOM support will come (#42) and I think it's possible without a monkey patch 🤞
from resize-observer.
Curious if it is possible without patching attachShadow. Is there another way to get any document when it is created?
from resize-observer.
Curious if it is possible without patching attachShadow. Is there another way to get any document when it is created?
Well I was hoping not to, however, that may not be the case. It depends on how many use cases to cover with shadow root vs performance of adding all those listeners and a monkey patch. Plus the patch has to be loaded before any shadow roots are created...
from resize-observer.
Plus the patch has to be loaded before any shadow roots are created...
I think that's fine; as with any polyfill it needs to be loaded first before code uses it. Native ResizeObserver is available before any user code ever runs, so I think it would be fair to tell users to load the polyfill before everything else too.
As far as I know, I think this is the only way to hook onto the shadow roots:
{
const original = Element.prototype.attachShadow
Element.prototype.attachShadow = function(...args) {
const root = original.apply(this, args)
new MutationObserver(...).observe(root)
return root
}
}
I wonder how to intercept CSS OM APIs. If the engine calls the APIs (like addRule
) whenever it is creating/modifying the CSS OM based on DOM changes (f.e. parsing <style>
during HTML parse, or later changes to <style>
DOM), then that would should work. But I know in some cases the engine bypasses the JS APIs internally (f.e. it does not call setAttribute
in order to set DOM attributes by any non-user means like parsing).
EDIT: Hmm, now that I think about it, we can detect initial styling with MutationObserver, then after that MutationObserver keeps triggering for DOM updates, and a monkey-patched CSS OM will detect user changes. So MutationObserver has the non-user cases covered (which I think are only parsing).
Here's an example that shows that the browser engine bypasses the user-exposed APIs when creating the CSS OM. Try the following in Chrome console to see there will be no output:
{
const original = CSSStyleSheet.prototype.addRule
CSSStyleSheet.prototype.addRule = function(...args) {
console.log('add rule!')
return original.apply(this, args)
}
}
{
const original = CSSStyleSheet.prototype.replaceSync
CSSStyleSheet.prototype.replaceSync = function(...args) {
console.log('replace sync!')
return original.apply(this, args)
}
}
{
const original = CSSStyleSheet.prototype.replace
CSSStyleSheet.prototype.replace = function(...args) {
console.log('replace!')
return original.apply(this, args)
}
}
{
const original = CSSStyleSheet
window.CSSStyleSheet = class extends original {
constructor(...args) {
console.log('CSSStyleSheet constructor!')
super(...args)
}
}
}
// I was hoping this would result in some output, but the engine creates the CSS OM somehow else,
// or maybe it holds references to the original non-patched APIs.
document.body.insertAdjacentHTML('beforeend', `
<style>
body { background: lightblue; }
</style>
`)
But at least we know, if the user calls replace{Sync}
or addRule
we can trigger an observation in that case. We'd need to track which documents the stylesheet is applied in.
from resize-observer.
Initial Shadow DOM support has been add to the v4.0.0-1 release. Hopefully this helps with some things.
I think the only thing left, which seems impossible to support without a monkey-patch, is the in-memory stylesheet changes and adopted stylesheets.
from resize-observer.
Added more info in the v4 readme. Will clean up the docs later, but for now, I think it's ok.
@trusktr feel free to open a new issue regarding CSSOM and constructing/adopting stylesheets.
from resize-observer.
Related Issues (20)
- Refactor and reduce code to allow for a smaller bundle size HOT 1
- ResizeObserver loop completed with undelivered notifications HOT 13
- .disconnect() breaks additional observe calls HOT 1
- Using this polyfill with polyfill.io HOT 4
- Improve code hints
- The UMD build doesn't not export the globals as expected HOT 5
- ResizeObserver loop completed with undelivered notifications (native works fine) HOT 13
- Improve the accuracy of device-pixel-content-box when moving elements across pixels
- Imports must specify file extension when "type": "module" HOT 4
- [Question] - How does this package compares with que-etc/resize-observer-polyfill ? HOT 3
- Missing null check HOT 3
- [spec] lastReportedSize should initialise with (-1, -1) HOT 1
- ResizeObserverEntry type does not match actual payload when using Safari versions 15.3.1 and older HOT 1
- the >>> and /deep/ combinators have been deprecated. Use :deep() instead HOT 1
- ResizeObserver loop completed with undelivered notifications. HOT 2
- Inconsistent anchoring in regex HOT 1
- import question HOT 5
- Update readme to point to public working draft HOT 2
- It throw error if target element inside a iframe on Chrome HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from resize-observer.