HTMLDataElement

src/browser/Page.zig

@@ -1094,6 +1094,12 @@ pub fn createElement(self: *Page, ns_: ?[]const u8, name: []const u8, attribute_
                 attribute_iterator,
                 .{ ._proto = undefined, ._tag_name = String.init(undefined, "main", .{}) catch unreachable, ._tag = .main },
             ),
+            asUint("data") => return self.createHtmlElementT(
+                Element.Html.Data,
+                namespace,
+                attribute_iterator,
+                .{ ._proto = undefined },
+            ),
             else => {},
         },
         5 => switch (@as(u40, @bitCast(name[0..5].*))) {

src/browser/js/bridge.zig

@@ -528,6 +528,7 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/element/html/BR.zig"),
     @import("../webapi/element/html/Button.zig"),
     @import("../webapi/element/html/Custom.zig"),
+    @import("../webapi/element/html/Data.zig"),
     @import("../webapi/element/html/Dialog.zig"),
     @import("../webapi/element/html/Div.zig"),
     @import("../webapi/element/html/Form.zig"),

src/browser/webapi/Element.zig

@@ -129,6 +129,7 @@ pub fn getTagNameLower(self: *const Element) []const u8 {
                 .br => "br",
                 .button => "button",
                 .custom => |e| e._tag_name.str(),
+                .data => "data",
                 .dialog => "dialog",
                 .div => "div",
                 .form => "form",
@@ -174,6 +175,7 @@ pub fn getTagNameSpec(self: *const Element, buf: []u8) []const u8 {
                 .br => "BR",
                 .button => "BUTTON",
                 .custom => |e| upperTagName(&e._tag_name, buf),
+                .data => "DATA",
                 .dialog => "DIALOG",
                 .div => "DIV",
                 .form => "FORM",
@@ -793,6 +795,7 @@ pub fn getTag(self: *const Element) Tag {
             .form => .form,
             .p => .p,
             .custom => .custom,
+            .data => .data,
             .dialog => .dialog,
             .iframe => .iframe,
             .img => .img,
@@ -835,6 +838,7 @@ pub const Tag = enum {
     button,
     circle,
     custom,
+    data,
     dialog,
     div,
     ellipse,

src/browser/webapi/element/Html.zig

@@ -42,6 +42,7 @@ pub const Custom = @import("html/Custom.zig");
 pub const Script = @import("html/Script.zig");
 pub const Anchor = @import("html/Anchor.zig");
 pub const Button = @import("html/Button.zig");
+pub const Data = @import("html/Data.zig");
 pub const Dialog = @import("html/Dialog.zig");
 pub const Form = @import("html/Form.zig");
 pub const Heading = @import("html/Heading.zig");
@@ -72,6 +73,7 @@ pub const Type = union(enum) {
     br: *BR,
     button: *Button,
     custom: *Custom,
+    data: *Data,
     dialog: *Dialog,
     div: *Div,
     form: *Form,
@@ -121,6 +123,7 @@ pub fn className(self: *const HtmlElement) []const u8 {
         .form => "[object HTMLFormElement]",
         .p => "[object HtmlParagraphElement]",
         .custom => "[object CUSTOM-TODO]",
+        .data => "[object HTMLDataElement]",
         .dialog => "[object HTMLDialogElement]",
         .img => "[object HTMLImageElement]",
         .iframe => "[object HTMLIFrameElement]",

src/browser/webapi/element/html/Data.zig

@@ -0,0 +1,56 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("../../../js/js.zig");
+const Page = @import("../../../Page.zig");
+
+const Node = @import("../../Node.zig");
+const Element = @import("../../Element.zig");
+const HtmlElement = @import("../Html.zig");
+
+const Data = @This();
+
+_proto: *HtmlElement,
+
+pub fn asElement(self: *Data) *Element {
+    return self._proto._proto;
+}
+
+pub fn asNode(self: *Data) *Node {
+    return self.asElement().asNode();
+}
+
+pub fn getValue(self: *Data) []const u8 {
+    return self.asElement().getAttributeSafe("value") orelse "";
+}
+
+pub fn setValue(self: *Data, value: []const u8, page: *Page) !void {
+    try self.asElement().setAttributeSafe("value", value, page);
+}
+
+pub const JsApi = struct {
+    pub const bridge = js.Bridge(Data);
+
+    pub const Meta = struct {
+        pub const name = "HTMLDataElement";
+        pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
+    };
+
+    pub const value = bridge.accessor(Data.getValue, Data.setValue, .{});
+};