LibWeb: Introduce CustomElementRegistry and creating custom elements

The main missing feature here is form associated custom elements.

Userland/Libraries/LibWeb/Bindings/MainThreadVM.cpp

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2021-2022, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2021, Luke Wilde <lukew@serenityos.org>
+ * Copyright (c) 2021-2023, Luke Wilde <lukew@serenityos.org>
  * Copyright (c) 2022, networkException <networkexception@serenityos.org>
  * Copyright (c) 2022-2023, Linus Groh <linusg@serenityos.org>
  *
@@ -21,6 +21,8 @@
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/MutationType.h>
 #include <LibWeb/HTML/AttributeNames.h>
+#include <LibWeb/HTML/CustomElements/CustomElementDefinition.h>
+#include <LibWeb/HTML/CustomElements/CustomElementReactionNames.h>
 #include <LibWeb/HTML/EventNames.h>
 #include <LibWeb/HTML/Location.h>
 #include <LibWeb/HTML/PromiseRejectionEvent.h>
@@ -78,6 +80,7 @@ ErrorOr<void> initialize_main_thread_vm()
     // These strings could potentially live on the VM similar to CommonPropertyNames.
     TRY(DOM::MutationType::initialize_strings());
     TRY(HTML::AttributeNames::initialize_strings());
+    TRY(HTML::CustomElementReactionNames::initialize_strings());
     TRY(HTML::EventNames::initialize_strings());
     TRY(HTML::TagNames::initialize_strings());
     TRY(Namespace::initialize_strings());
@@ -499,4 +502,42 @@ void WebEngineCustomData::spin_event_loop_until(Function<bool()> goal_condition)
     Platform::EventLoopPlugin::the().spin_until(move(goal_condition));
 }
 
+// https://html.spec.whatwg.org/multipage/custom-elements.html#invoke-custom-element-reactions
+void invoke_custom_element_reactions(Vector<JS::Handle<DOM::Element>>& element_queue)
+{
+    // 1. While queue is not empty:
+    while (!element_queue.is_empty()) {
+        // 1. Let element be the result of dequeuing from queue.
+        auto element = element_queue.take_first();
+
+        // 2. Let reactions be element's custom element reaction queue.
+        auto& reactions = element->custom_element_reaction_queue();
+
+        // 3. Repeat until reactions is empty:
+        while (!reactions.is_empty()) {
+            // 1. Remove the first element of reactions, and let reaction be that element. Switch on reaction's type:
+            auto reaction = reactions.take_first();
+
+            auto maybe_exception = reaction.visit(
+                [&](DOM::CustomElementUpgradeReaction const& custom_element_upgrade_reaction) -> JS::ThrowCompletionOr<void> {
+                    // -> upgrade reaction
+                    //      Upgrade element using reaction's custom element definition.
+                    return element->upgrade_element(*custom_element_upgrade_reaction.custom_element_definition);
+                },
+                [&](DOM::CustomElementCallbackReaction& custom_element_callback_reaction) -> JS::ThrowCompletionOr<void> {
+                    // -> callback reaction
+                    //      Invoke reaction's callback function with reaction's arguments, and with element as the callback this value.
+                    auto result = WebIDL::invoke_callback(*custom_element_callback_reaction.callback, element.ptr(), custom_element_callback_reaction.arguments);
+                    if (result.is_abrupt())
+                        return result.release_error();
+                    return {};
+                });
+
+            // If this throws an exception, catch it, and report the exception.
+            if (maybe_exception.is_throw_completion())
+                HTML::report_exception(maybe_exception, element->realm());
+        }
+    }
+}
+
 }

Userland/Libraries/LibWeb/Bindings/MainThreadVM.h

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2021-2022, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2021, Luke Wilde <lukew@serenityos.org>
+ * Copyright (c) 2021-2023, Luke Wilde <lukew@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -10,11 +10,31 @@
 #include <LibJS/Forward.h>
 #include <LibJS/Runtime/JobCallback.h>
 #include <LibJS/Runtime/VM.h>
+#include <LibWeb/DOM/Element.h>
 #include <LibWeb/DOM/MutationObserver.h>
 #include <LibWeb/HTML/EventLoop/EventLoop.h>
 
 namespace Web::Bindings {
 
+// https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions-stack
+struct CustomElementReactionsStack {
+    CustomElementReactionsStack() = default;
+    ~CustomElementReactionsStack() = default;
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#element-queue
+    // Each item in the stack is an element queue, which is initially empty as well. Each item in an element queue is an element.
+    // (The elements are not necessarily custom yet, since this queue is used for upgrades as well.)
+    Vector<Vector<JS::Handle<DOM::Element>>> element_queue_stack;
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#backup-element-queue
+    // Each custom element reactions stack has an associated backup element queue, which an initially-empty element queue.
+    Vector<JS::Handle<DOM::Element>> backup_element_queue;
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#processing-the-backup-element-queue
+    // To prevent reentrancy when processing the backup element queue, each custom element reactions stack also has a processing the backup element queue flag, initially unset.
+    bool processing_the_backup_element_queue { false };
+};
+
 struct WebEngineCustomData final : public JS::VM::CustomData {
     virtual ~WebEngineCustomData() override = default;
 
@@ -34,6 +54,15 @@ struct WebEngineCustomData final : public JS::VM::CustomData {
     JS::Handle<JS::Realm> internal_realm;
 
     OwnPtr<JS::ExecutionContext> root_execution_context;
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions-stack
+    // Each similar-origin window agent has a custom element reactions stack, which is initially empty.
+    CustomElementReactionsStack custom_element_reactions_stack {};
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#current-element-queue
+    // A similar-origin window agent's current element queue is the element queue at the top of its custom element reactions stack.
+    Vector<JS::Handle<DOM::Element>>& current_element_queue() { return custom_element_reactions_stack.element_queue_stack.last(); }
+    Vector<JS::Handle<DOM::Element>> const& current_element_queue() const { return custom_element_reactions_stack.element_queue_stack.last(); }
 };
 
 struct WebEngineCustomJobCallbackData final : public JS::JobCallback::CustomData {
@@ -56,5 +85,6 @@ JS::VM& main_thread_vm();
 
 void queue_mutation_observer_microtask(DOM::Document const&);
 NonnullOwnPtr<JS::ExecutionContext> create_a_new_javascript_realm(JS::VM&, Function<JS::Object*(JS::Realm&)> create_global_object, Function<JS::Object*(JS::Realm&)> create_global_this_value);
+void invoke_custom_element_reactions(Vector<JS::Handle<DOM::Element>>& element_queue);
 
 }