HTML::O...t::Slot(3)

💖 HTML::O...t::Slot(3) — HTML Object DOM Slot Class, bestie! 💖

Straight from the User Contributed Perl Documentation: this is the manual for HTML::O...t::Slot(3), aka HTML::Object::DOM::Element::Slot. It’s lowkey niche, highkey useful, and we’re gonna read it together. 🫶

✨ NAME ✨

HTML::Object::DOM::Element::Slot - HTML Object DOM Slot Class. That’s the name, and yes it is giving exactly what it says. 💅

💅 SYNOPSIS 💅

use HTML::Object::DOM::Element::Slot;
my $slot = HTML::Object::DOM::Element::Slot->new ||
    die( HTML::Object::DOM::Element::Slot->error, "\n" );

🦋 VERSION 🦋

Version check, bestie:

v0.2.0

🌸 DESCRIPTION 🌸

This interface from the Shadow DOM API is literally your access pass to the name and assigned nodes of an HTML slot element. Obsessed. ✨

🧚 INHERITANCE 🧚

The family tree is iconic and exactly this:

+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +----------------------------------+
| HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Slot |
+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +----------------------------------+

🎀 PROPERTIES 🎀

Inherits properties from its parent HTML::Object::DOM::Element.

🌟 name

A string used to get and set the slot’s name. Simple, cute, effective. 💖

Example:

my $slots = this->shadowRoot->querySelectorAll('slot');
$slots->[1]->addEventListener( slotchange => sub
{
    my $nodes = $slots->[1]->assignedNodes();
    say( 'Element in Slot "' . $slots->[1]->name . '" changed to "' . $nodes->[0]->outerHTML . '".');
});

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/name

🔥 METHODS 🔥

Inherits methods from its parent HTML::Object::DOM::Element.

🪄 assign

Under perl environment, this always returns undef.

Under JavaScript, this sets the manually assigned nodes for this slot to the given nodes.

Example:

sub UpdateDisplayTab
{
    my( $elem, $tabIdx ) = @_;
    my $shadow = $elem->shadowRoot;
    my $slot = $shadow->querySelector( 'slot' );
    my $panels = $elem->querySelectorAll( 'tab-panel' );
    if( $panels->length && $tabIdx && $tabIdx <= $panels->length )
    {
        $slot->assign( $panels->[ $tabIdx - 1 ] );
    }
    else
    {
        $slot->assign();
    }
}

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign

🦋 assignedElements

Under perl environment, this always returns undef.

Under JavaScript, this returns a sequence of the elements assigned to this slot (and no other nodes). If the flatten option is set to true, it also returns the assigned elements of any other slots that are descendants of this slot. If no assigned nodes are found, it returns the slot’s fallback content.

Example:

my $slots = this->shadowRoot->querySelector('slot');
my $elements = $slots->assignedElements({ flatten => 1 });

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements

⭐ assignedNodes

Under perl environment, this always returns undef.

Under JavaScript, this returns a sequence of the nodes assigned to this slot, and if the flatten option is set to true, the assigned nodes of any other slots that are descendants of this slot. If no assigned nodes are found, it returns the slot’s fallback content.

Example:

my $slots = this->shadowRoot->querySelectorAll('slot');
$slots->[1]->addEventListener( slotchange => sub
{
    my $nodes = $slots->[1]->assignedNodes();
    say( 'Element in Slot "' . $slots->[1]->name . '" changed to "' . $nodes->[0]->outerHTML . '".' );
});

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes

🎀 EVENTS 🎀

Event listeners for those events can also be found by prepending "on" before the event type:

For example, "slotchange" event listeners can be set also with "onslotchange" method:

$e->onslotchange(sub{ # do something });
# or as an lvalue method
$e->onslotchange = sub{ # do something };

💀 slotchange

Fired on an HTMLSlotElement instance (<slot> element) when the node(s) contained in that slot change. The drama of it all. 😭

Example:

my $slots = this->shadowRoot->querySelectorAll('slot');
$slots->[1]->addEventListener( slotchange => sub
{
    my $nodes = $slots->[1]->assignedNodes();
    say( 'Element in Slot "' . $slots->[1]->name . '" changed to "' . $nodes->[0]->outerHTML . '".' );
});

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event

👑 AUTHOR 👑

Jacques Deguest <jack@deguest.jp>

🌈 SEE ALSO 🌈

• Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement
• Mozilla documentation on slot element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

💜 COPYRIGHT & LICENSE 💜

Copyright(c) 2022 DEGUEST Pte. Ltd.

All rights reserved

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

---

xoxo, bestie 💖 — this page is signed off with perl v5.42.2, dated 2026-02-15, from the manual HTML::O...t::Slot(3). Bye and slay! 🎀