diff --git a/demo/cross-iframe-sand.html b/demo/cross-iframe-sand.html
new file mode 100644
index 0000000..554c024
--- /dev/null
+++ b/demo/cross-iframe-sand.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+ Falling Sand Demo
+
+
+
+
+
1 Smoke
+
2 Water
+
3 Lava
+
4 Sand
+
5 Plant
+
6 Stone
+
7 Wall
+
8 Ice
+
9 Fire
+
Sanding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/sticky-html-arrow.html b/demo/sticky-html-arrow.html
index 7360912..1540128 100644
--- a/demo/sticky-html-arrow.html
+++ b/demo/sticky-html-arrow.html
@@ -18,6 +18,7 @@
folk-shape {
border: 1px solid black;
border-radius: 3px;
+ background-color: rgba(119, 119, 119, 1);
}
diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts
index e1cc77c..1f7c6c3 100644
--- a/src/folk-base-set.ts
+++ b/src/folk-base-set.ts
@@ -1,7 +1,7 @@
import { property, state } from '@lit/reactive-element/decorators.js';
import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
import { FolkElement } from './common/folk-element.ts';
-import { FolkObserver } from './common/folk-observer.ts';
+import { FolkObserver, parseDeepCSSSelector } from './common/folk-observer.ts';
import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element';
const folkObserver = new FolkObserver();
@@ -64,15 +64,16 @@ export class FolkBaseSet extends FolkElement {
#observeSources() {
const childElements = new Set(this.children);
- const elements = this.sources ? document.querySelectorAll(this.sources) : [];
- const sourceElements = new Set(elements).union(childElements);
+ const elements = this.sources ? parseDeepCSSSelector(this.sources) : [];
+ const elementsMap = new Map(elements);
+ const sourceElements = new Set(elements.map((el) => el[0])).union(childElements);
const elementsToObserve = sourceElements.difference(this.sourceElements);
const elementsToUnobserve = this.sourceElements.difference(sourceElements);
this.unobserveSources(elementsToUnobserve);
for (const el of elementsToObserve) {
- folkObserver.observe(el, this.#sourcesCallback);
+ folkObserver.observe(el, this.#sourcesCallback, { iframeSelector: elementsMap.get(el) });
}
this.sourceElements = sourceElements;