2020-11-21 18:32:39 +00:00
|
|
|
|
/*
|
|
|
|
|
|
* Copyright (c) 2020, the SerenityOS developers.
|
|
|
|
|
|
*
|
2021-04-22 01:24:48 -07:00
|
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-11-21 18:32:39 +00:00
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
#pragma once
|
|
|
|
|
|
|
2023-01-28 20:31:56 +01:00
|
|
|
|
#include <LibWeb/Bindings/ShadowRootPrototype.h>
|
LibWeb: Add StyleScope to keep style caches per Document/ShadowRoot
Before this change, we've been maintaining various StyleComputer caches
at the document level.
This made sense for old-school documents without shadow trees, since
all the style information was document-wide anyway. However, documents
with many shadow trees ended up suffering since any time you mutated
a style sheet inside a shadow tree, *all* style caches for the entire
document would get invalidated.
This was particularly expensive on Reddit, which has tons of shadow
trees with their own style elements. Every time we'd create one of their
custom elements, we'd invalidate the document-level "rule cache" and
have to rebuild it, taking about ~60ms each time (ouch).
This commit introduces a new object called StyleScope.
Every Document and ShadowRoot has its own StyleScope. Rule caches etc
are moved from StyleComputer to StyleScope.
Rule cache invalidation now happens at StyleScope level. As an example,
rule cache rebuilds now take ~1ms on Reddit instead of ~60ms.
This is largely a mechanical change, moving things around, but there's
one key detail to be aware of: due to the :host selector, which works
across the shadow DOM boundary and reaches from inside a shadow tree out
into the light tree, there are various places where we have to check
both the shadow tree's StyleScope *and* the document-level StyleScope
in order to get all rules that may apply.
2025-11-13 19:08:08 +01:00
|
|
|
|
#include <LibWeb/CSS/StyleScope.h>
|
2020-11-21 18:32:39 +00:00
|
|
|
|
#include <LibWeb/DOM/DocumentFragment.h>
|
2025-03-25 17:30:52 +00:00
|
|
|
|
#include <LibWeb/DOM/ElementByIdMap.h>
|
2025-07-19 19:35:33 -07:00
|
|
|
|
#include <LibWeb/Export.h>
|
2024-03-08 19:27:24 +01:00
|
|
|
|
#include <LibWeb/WebIDL/ObservableArray.h>
|
2020-11-21 18:32:39 +00:00
|
|
|
|
|
|
|
|
|
|
namespace Web::DOM {
|
|
|
|
|
|
|
2025-07-19 19:35:33 -07:00
|
|
|
|
class WEB_API ShadowRoot final : public DocumentFragment {
|
2022-08-28 13:42:07 +02:00
|
|
|
|
WEB_PLATFORM_OBJECT(ShadowRoot, DocumentFragment);
|
2024-11-15 04:01:23 +13:00
|
|
|
|
GC_DECLARE_ALLOCATOR(ShadowRoot);
|
2020-11-21 18:32:39 +00:00
|
|
|
|
|
2022-08-28 13:42:07 +02:00
|
|
|
|
public:
|
2023-01-28 20:31:56 +01:00
|
|
|
|
Bindings::ShadowRootMode mode() const { return m_mode; }
|
2020-11-21 18:32:39 +00:00
|
|
|
|
|
2023-09-01 07:25:40 -04:00
|
|
|
|
Bindings::SlotAssignmentMode slot_assignment() const { return m_slot_assignment; }
|
|
|
|
|
|
void set_slot_assignment(Bindings::SlotAssignmentMode slot_assignment) { m_slot_assignment = slot_assignment; }
|
|
|
|
|
|
|
2020-11-21 18:32:39 +00:00
|
|
|
|
bool delegates_focus() const { return m_delegates_focus; }
|
|
|
|
|
|
void set_delegates_focus(bool delegates_focus) { m_delegates_focus = delegates_focus; }
|
|
|
|
|
|
|
2024-06-25 09:42:51 +02:00
|
|
|
|
[[nodiscard]] bool declarative() const { return m_declarative; }
|
|
|
|
|
|
void set_declarative(bool declarative) { m_declarative = declarative; }
|
|
|
|
|
|
|
|
|
|
|
|
[[nodiscard]] bool clonable() const { return m_clonable; }
|
|
|
|
|
|
void set_clonable(bool clonable) { m_clonable = clonable; }
|
|
|
|
|
|
|
|
|
|
|
|
[[nodiscard]] bool serializable() const { return m_serializable; }
|
|
|
|
|
|
void set_serializable(bool serializable) { m_serializable = serializable; }
|
|
|
|
|
|
|
2024-05-02 00:01:22 +01:00
|
|
|
|
void set_onslotchange(WebIDL::CallbackType*);
|
|
|
|
|
|
WebIDL::CallbackType* onslotchange();
|
|
|
|
|
|
|
2020-11-21 18:32:39 +00:00
|
|
|
|
bool available_to_element_internals() const { return m_available_to_element_internals; }
|
|
|
|
|
|
void set_available_to_element_internals(bool available_to_element_internals) { m_available_to_element_internals = available_to_element_internals; }
|
|
|
|
|
|
|
|
|
|
|
|
// ^EventTarget
|
2022-04-01 20:58:27 +03:00
|
|
|
|
virtual EventTarget* get_parent(Event const&) override;
|
2020-11-21 18:32:39 +00:00
|
|
|
|
|
2025-08-11 00:01:41 +02:00
|
|
|
|
WebIDL::ExceptionOr<TrustedTypes::TrustedHTMLOrString> inner_html() const;
|
|
|
|
|
|
WebIDL::ExceptionOr<void> set_inner_html(TrustedTypes::TrustedHTMLOrString const&);
|
2021-09-13 22:42:57 +01:00
|
|
|
|
|
2025-08-11 00:01:41 +02:00
|
|
|
|
WebIDL::ExceptionOr<void> set_html_unsafe(TrustedTypes::TrustedHTMLOrString const&);
|
2024-06-25 20:55:58 +01:00
|
|
|
|
|
2024-06-25 14:52:06 +02:00
|
|
|
|
WebIDL::ExceptionOr<String> get_html(GetHTMLOptions const&) const;
|
|
|
|
|
|
|
2025-02-02 22:04:01 -08:00
|
|
|
|
GC::Ptr<Element> active_element();
|
|
|
|
|
|
|
2024-03-08 19:27:24 +01:00
|
|
|
|
CSS::StyleSheetList& style_sheets();
|
|
|
|
|
|
CSS::StyleSheetList const& style_sheets() const;
|
|
|
|
|
|
|
|
|
|
|
|
CSS::StyleSheetList* style_sheets_for_bindings() { return &style_sheets(); }
|
|
|
|
|
|
|
2024-11-15 04:01:23 +13:00
|
|
|
|
GC::Ref<WebIDL::ObservableArray> adopted_style_sheets() const;
|
2024-03-08 19:27:24 +01:00
|
|
|
|
WebIDL::ExceptionOr<void> set_adopted_style_sheets(JS::Value);
|
|
|
|
|
|
|
2023-03-19 17:01:26 +01:00
|
|
|
|
void for_each_css_style_sheet(Function<void(CSS::CSSStyleSheet&)>&& callback) const;
|
LibWeb: Add StyleScope to keep style caches per Document/ShadowRoot
Before this change, we've been maintaining various StyleComputer caches
at the document level.
This made sense for old-school documents without shadow trees, since
all the style information was document-wide anyway. However, documents
with many shadow trees ended up suffering since any time you mutated
a style sheet inside a shadow tree, *all* style caches for the entire
document would get invalidated.
This was particularly expensive on Reddit, which has tons of shadow
trees with their own style elements. Every time we'd create one of their
custom elements, we'd invalidate the document-level "rule cache" and
have to rebuild it, taking about ~60ms each time (ouch).
This commit introduces a new object called StyleScope.
Every Document and ShadowRoot has its own StyleScope. Rule caches etc
are moved from StyleComputer to StyleScope.
Rule cache invalidation now happens at StyleScope level. As an example,
rule cache rebuilds now take ~1ms on Reddit instead of ~60ms.
This is largely a mechanical change, moving things around, but there's
one key detail to be aware of: due to the :host selector, which works
across the shadow DOM boundary and reaches from inside a shadow tree out
into the light tree, there are various places where we have to check
both the shadow tree's StyleScope *and* the document-level StyleScope
in order to get all rules that may apply.
2025-11-13 19:08:08 +01:00
|
|
|
|
void for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&)>&& callback) const;
|
2023-03-19 17:01:26 +01:00
|
|
|
|
|
2024-11-15 04:01:23 +13:00
|
|
|
|
WebIDL::ExceptionOr<Vector<GC::Ref<Animations::Animation>>> get_animations();
|
2024-06-02 07:26:36 -07:00
|
|
|
|
|
2025-03-25 17:30:52 +00:00
|
|
|
|
ElementByIdMap& element_by_id() const;
|
|
|
|
|
|
|
LibWeb: Add StyleScope to keep style caches per Document/ShadowRoot
Before this change, we've been maintaining various StyleComputer caches
at the document level.
This made sense for old-school documents without shadow trees, since
all the style information was document-wide anyway. However, documents
with many shadow trees ended up suffering since any time you mutated
a style sheet inside a shadow tree, *all* style caches for the entire
document would get invalidated.
This was particularly expensive on Reddit, which has tons of shadow
trees with their own style elements. Every time we'd create one of their
custom elements, we'd invalidate the document-level "rule cache" and
have to rebuild it, taking about ~60ms each time (ouch).
This commit introduces a new object called StyleScope.
Every Document and ShadowRoot has its own StyleScope. Rule caches etc
are moved from StyleComputer to StyleScope.
Rule cache invalidation now happens at StyleScope level. As an example,
rule cache rebuilds now take ~1ms on Reddit instead of ~60ms.
This is largely a mechanical change, moving things around, but there's
one key detail to be aware of: due to the :host selector, which works
across the shadow DOM boundary and reaches from inside a shadow tree out
into the light tree, there are various places where we have to check
both the shadow tree's StyleScope *and* the document-level StyleScope
in order to get all rules that may apply.
2025-11-13 19:08:08 +01:00
|
|
|
|
CSS::StyleScope const& style_scope() const { return m_style_scope; }
|
|
|
|
|
|
CSS::StyleScope& style_scope() { return m_style_scope; }
|
|
|
|
|
|
|
2024-03-09 00:19:05 +01:00
|
|
|
|
virtual void finalize() override;
|
|
|
|
|
|
|
2024-03-08 19:27:24 +01:00
|
|
|
|
protected:
|
|
|
|
|
|
virtual void visit_edges(Cell::Visitor&) override;
|
|
|
|
|
|
|
2020-11-21 18:32:39 +00:00
|
|
|
|
private:
|
2023-01-28 20:36:58 +01:00
|
|
|
|
ShadowRoot(Document&, Element& host, Bindings::ShadowRootMode);
|
2023-08-07 08:41:28 +02:00
|
|
|
|
virtual void initialize(JS::Realm&) override;
|
2022-08-28 13:42:07 +02:00
|
|
|
|
|
2021-02-10 18:23:52 +01:00
|
|
|
|
// ^Node
|
2023-09-17 10:51:43 +12:00
|
|
|
|
virtual FlyString node_name() const override { return "#shadow-root"_fly_string; }
|
2022-03-13 17:21:27 +01:00
|
|
|
|
virtual bool is_shadow_root() const final { return true; }
|
2021-02-10 18:23:52 +01:00
|
|
|
|
|
2023-09-01 07:25:40 -04:00
|
|
|
|
// NOTE: The specification doesn't seem to specify a default value for mode. Assuming closed for now.
|
2023-01-28 20:31:56 +01:00
|
|
|
|
Bindings::ShadowRootMode m_mode { Bindings::ShadowRootMode::Closed };
|
2023-09-01 07:25:40 -04:00
|
|
|
|
Bindings::SlotAssignmentMode m_slot_assignment { Bindings::SlotAssignmentMode::Named };
|
2020-11-21 18:32:39 +00:00
|
|
|
|
bool m_delegates_focus { false };
|
|
|
|
|
|
bool m_available_to_element_internals { false };
|
2024-03-08 19:27:24 +01:00
|
|
|
|
|
2024-06-25 09:42:51 +02:00
|
|
|
|
// https://dom.spec.whatwg.org/#shadowroot-declarative
|
|
|
|
|
|
bool m_declarative { false };
|
|
|
|
|
|
|
|
|
|
|
|
// https://dom.spec.whatwg.org/#shadowroot-clonable
|
|
|
|
|
|
bool m_clonable { false };
|
|
|
|
|
|
|
|
|
|
|
|
// https://dom.spec.whatwg.org/#shadowroot-serializable
|
|
|
|
|
|
bool m_serializable { false };
|
|
|
|
|
|
|
2025-03-25 17:30:52 +00:00
|
|
|
|
mutable OwnPtr<ElementByIdMap> m_element_by_id;
|
|
|
|
|
|
|
2024-11-15 04:01:23 +13:00
|
|
|
|
GC::Ptr<CSS::StyleSheetList> m_style_sheets;
|
|
|
|
|
|
mutable GC::Ptr<WebIDL::ObservableArray> m_adopted_style_sheets;
|
2025-04-09 20:57:35 +02:00
|
|
|
|
|
|
|
|
|
|
IntrusiveListNode<ShadowRoot> m_list_node;
|
|
|
|
|
|
|
LibWeb: Add StyleScope to keep style caches per Document/ShadowRoot
Before this change, we've been maintaining various StyleComputer caches
at the document level.
This made sense for old-school documents without shadow trees, since
all the style information was document-wide anyway. However, documents
with many shadow trees ended up suffering since any time you mutated
a style sheet inside a shadow tree, *all* style caches for the entire
document would get invalidated.
This was particularly expensive on Reddit, which has tons of shadow
trees with their own style elements. Every time we'd create one of their
custom elements, we'd invalidate the document-level "rule cache" and
have to rebuild it, taking about ~60ms each time (ouch).
This commit introduces a new object called StyleScope.
Every Document and ShadowRoot has its own StyleScope. Rule caches etc
are moved from StyleComputer to StyleScope.
Rule cache invalidation now happens at StyleScope level. As an example,
rule cache rebuilds now take ~1ms on Reddit instead of ~60ms.
This is largely a mechanical change, moving things around, but there's
one key detail to be aware of: due to the :host selector, which works
across the shadow DOM boundary and reaches from inside a shadow tree out
into the light tree, there are various places where we have to check
both the shadow tree's StyleScope *and* the document-level StyleScope
in order to get all rules that may apply.
2025-11-13 19:08:08 +01:00
|
|
|
|
CSS::StyleScope m_style_scope;
|
|
|
|
|
|
|
2025-04-09 20:57:35 +02:00
|
|
|
|
public:
|
|
|
|
|
|
using DocumentShadowRootList = IntrusiveList<&ShadowRoot::m_list_node>;
|
2020-11-21 18:32:39 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
2022-03-13 17:21:27 +01:00
|
|
|
|
template<>
|
2023-11-02 15:21:30 +01:00
|
|
|
|
inline bool Node::fast_is<ShadowRoot>() const { return node_type() == to_underlying(NodeType::DOCUMENT_FRAGMENT_NODE) && is_shadow_root(); }
|
2022-03-13 17:21:27 +01:00
|
|
|
|
|
2024-11-12 18:08:49 +00:00
|
|
|
|
// https://dom.spec.whatwg.org/#concept-shadow-including-tree-order
|
|
|
|
|
|
// In shadow-including tree order is shadow-including preorder, depth-first traversal of a node tree.
|
|
|
|
|
|
// Shadow-including preorder, depth-first traversal of a node tree tree is preorder, depth-first traversal
|
|
|
|
|
|
// of tree, with for each shadow host encountered in tree, shadow-including preorder, depth-first traversal
|
|
|
|
|
|
// of that element’s shadow root’s node tree just after it is encountered.
|
|
|
|
|
|
|
|
|
|
|
|
// https://dom.spec.whatwg.org/#concept-shadow-including-descendant
|
|
|
|
|
|
// An object A is a shadow-including descendant of an object B, if A is a descendant of B, or A’s root is a
|
|
|
|
|
|
// shadow root and A’s root’s host is a shadow-including inclusive descendant of B.
|
|
|
|
|
|
|
|
|
|
|
|
// https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant
|
|
|
|
|
|
// A shadow-including inclusive descendant is an object or one of its shadow-including descendants.
|
|
|
|
|
|
|
2022-07-12 23:13:57 +02:00
|
|
|
|
template<typename Callback>
|
2024-05-04 14:47:04 +01:00
|
|
|
|
inline TraversalDecision Node::for_each_shadow_including_inclusive_descendant(Callback callback)
|
2022-07-12 23:13:57 +02:00
|
|
|
|
{
|
2024-05-04 14:47:04 +01:00
|
|
|
|
if (callback(*this) == TraversalDecision::Break)
|
|
|
|
|
|
return TraversalDecision::Break;
|
2024-11-12 18:08:49 +00:00
|
|
|
|
|
2025-07-12 00:41:57 +12:00
|
|
|
|
if (this->for_each_shadow_including_descendant(callback) == TraversalDecision::Break)
|
|
|
|
|
|
return TraversalDecision::Break;
|
|
|
|
|
|
|
|
|
|
|
|
return TraversalDecision::Continue;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
template<typename Callback>
|
|
|
|
|
|
inline TraversalDecision Node::for_each_shadow_including_descendant(Callback callback)
|
|
|
|
|
|
{
|
2024-11-12 18:08:49 +00:00
|
|
|
|
if (is_element()) {
|
|
|
|
|
|
if (auto shadow_root = static_cast<Element*>(this)->shadow_root()) {
|
|
|
|
|
|
if (shadow_root->for_each_shadow_including_inclusive_descendant(callback) == TraversalDecision::Break)
|
|
|
|
|
|
return TraversalDecision::Break;
|
2023-03-29 23:46:18 +01:00
|
|
|
|
}
|
2024-11-12 18:08:49 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
for (auto* child = first_child(); child; child = child->next_sibling()) {
|
2024-05-04 14:47:04 +01:00
|
|
|
|
if (child->for_each_shadow_including_inclusive_descendant(callback) == TraversalDecision::Break)
|
|
|
|
|
|
return TraversalDecision::Break;
|
2023-03-29 23:46:18 +01:00
|
|
|
|
}
|
2024-11-12 18:08:49 +00:00
|
|
|
|
|
2024-05-04 14:47:04 +01:00
|
|
|
|
return TraversalDecision::Continue;
|
2023-03-29 23:46:18 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-21 18:32:39 +00:00
|
|
|
|
}
|