Merge pull request #1918 from lightpanda-io/shadowroot_adoptedstyle
Some checks failed
e2e-test / zig build release (push) Has been cancelled
e2e-test / demo-scripts (push) Has been cancelled
e2e-test / wba-demo-scripts (push) Has been cancelled
e2e-test / wba-test (push) Has been cancelled
e2e-test / cdp-and-hyperfine-bench (push) Has been cancelled
e2e-test / perf-fmt (push) Has been cancelled
e2e-test / browser fetch (push) Has been cancelled
zig-test / zig fmt (push) Has been cancelled
zig-test / zig test using v8 in debug mode (push) Has been cancelled
zig-test / zig test (push) Has been cancelled
zig-test / perf-fmt (push) Has been cancelled
e2e-integration-test / zig build release (push) Has been cancelled
e2e-integration-test / demo-integration-scripts (push) Has been cancelled

Add `adoptedStyleSheets` property to ShadowRoot, just like Document
This commit is contained in:
Karl Seguin
2026-03-20 07:11:49 +08:00
committed by GitHub
2 changed files with 31 additions and 2 deletions

View File

@@ -5,7 +5,7 @@
<div id="host2"></div> <div id="host2"></div>
<div id="host3"></div> <div id="host3"></div>
<!-- <script id="attachShadow_open"> <script id="attachShadow_open">
{ {
const host = $('#host1'); const host = $('#host1');
const shadow = host.attachShadow({ mode: 'open' }); const shadow = host.attachShadow({ mode: 'open' });
@@ -140,7 +140,7 @@
shadow.replaceChildren('New content'); shadow.replaceChildren('New content');
testing.expectEqual('New content', shadow.innerHTML); testing.expectEqual('New content', shadow.innerHTML);
} }
</script> --> </script>
<script id="getElementById"> <script id="getElementById">
{ {
@@ -154,3 +154,16 @@
testing.expectEqual(null, shadow.getElementById('nonexistent')); testing.expectEqual(null, shadow.getElementById('nonexistent'));
} }
</script> </script>
<script id=adoptedStyleSheets>
{
const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'open' });
const acss = shadow.adoptedStyleSheets;
testing.expectEqual(0, acss.length);
acss.push(new CSSStyleSheet());
testing.expectEqual(1, acss.length);
}
</script>

View File

@@ -40,6 +40,7 @@ _mode: Mode,
_host: *Element, _host: *Element,
_elements_by_id: std.StringHashMapUnmanaged(*Element) = .{}, _elements_by_id: std.StringHashMapUnmanaged(*Element) = .{},
_removed_ids: std.StringHashMapUnmanaged(void) = .{}, _removed_ids: std.StringHashMapUnmanaged(void) = .{},
_adopted_style_sheets: ?js.Object.Global = null,
pub fn init(host: *Element, mode: Mode, page: *Page) !*ShadowRoot { pub fn init(host: *Element, mode: Mode, page: *Page) !*ShadowRoot {
return page._factory.documentFragment(ShadowRoot{ return page._factory.documentFragment(ShadowRoot{
@@ -99,6 +100,20 @@ pub fn getElementById(self: *ShadowRoot, id: []const u8, page: *Page) ?*Element
return null; return null;
} }
pub fn getAdoptedStyleSheets(self: *ShadowRoot, page: *Page) !js.Object.Global {
if (self._adopted_style_sheets) |ass| {
return ass;
}
const js_arr = page.js.local.?.newArray(0);
const js_obj = js_arr.toObject();
self._adopted_style_sheets = try js_obj.persist();
return self._adopted_style_sheets.?;
}
pub fn setAdoptedStyleSheets(self: *ShadowRoot, sheets: js.Object) !void {
self._adopted_style_sheets = try sheets.persist();
}
pub const JsApi = struct { pub const JsApi = struct {
pub const bridge = js.Bridge(ShadowRoot); pub const bridge = js.Bridge(ShadowRoot);
@@ -121,6 +136,7 @@ pub const JsApi = struct {
} }
return self.getElementById(try value.toZig([]const u8), page); return self.getElementById(try value.toZig([]const u8), page);
} }
pub const adoptedStyleSheets = bridge.accessor(ShadowRoot.getAdoptedStyleSheets, ShadowRoot.setAdoptedStyleSheets, .{});
}; };
const testing = @import("../../testing.zig"); const testing = @import("../../testing.zig");