Hello Starlight Sparkle,
Thank you for your interest. The proper way to update a tab item’s label and/or content is by calling the method update. Here is an example of setting only the title:
document.getElementById('tabs').update(0, 'Updated title');
If you wish to change the content, too, pass a third argument, e.g.:
document.getElementById('tabs').update(0, 'Updated title', 'Updated content');
Here is also a demo that showcases this method among others: https://www.htmlelements.com/demos/tabs/insert-remove-update/.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

Hi Starlight Sparkle,
the newly added item via the “addNewTab” button always has a label of “New Tab” and it’s not possible to change that via API. However since the new item becomes the selected item by default you can accomplish the same result by binding to the change event and calling update method on it. Here’s how to do it:

document.querySelector('smart-tabs').addEventListener('change', function (event) {
        const newTabIndex = event.detail.index;
        //Get all tab items inside the element
        const allTabItems = this.querySelectorAll('smart-tab-item');
        //Update the label
        if (allTabItems[newTabIndex].label === 'New Tab') {
            this.update(newTabIndex, 'New Custom Label');
        }
    });

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com