Setting or changing document.title has no effect on TitleBar text

[sinejoe]

Describe the bug

Shopify documentation here: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar states that setting document.title in javascript should change the TitleBar display text value. But this does not work, doing so has no effect.

To Reproduce

Steps to reproduce the behavior:

1. Load an embedded app in Shopify store dashboard with a ui-title-bar present with AppBridge latest via <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
2. Open devtools in Chrome browser
3. Click to Console tab
4. Select the app-iframe window/frame
5. Try to change the document title by typing javascript: document.title = 'Anything'; <ENTER>

Expected behavior

Example code in Shopify documentation should work as specified.

Contextual information

Workaround is to use document.getElementsByTagName('ui-title-bar')[0].setAttribute('title', 'Anything') which works as expected.

Packages and versions

• @shopify/app-bridge @ 1.23.0
• No other packages in play, plain HTML, vanilla Javascript
• Polaris CSS v6 stylesheet used in this case, but no Polaris React

Platform

• OS: MacOS
• OS Version: 14.4
• App: Chrome

[henrytao-me]

This is because you set title attribute to ui-title-bar. It only fallbacks to document.title when you don't set it. Ex:

<ui-title-bar>
 ...
</ui-title-bar>