NAME

HTML::Object::DOM::Element::Slot - HTML Object DOM Slot Class

SYNOPSIS

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

VERSION

    v0.2.0

DESCRIPTION

This interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML slot element.

INHERITANCE

    +-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +----------------------------------+
    | 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.

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

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

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

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

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.

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

AUTHOR

Jacques Deguest <jack@deguest.jp>

SEE ALSO

Mozilla documentation, Mozilla documentation on slot element

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.

cpanm HTML::Object

perl -MCPAN -e shell
install HTML::Object