fix(masthead): ensure custom L0 nav items work (#11547)

### Related Ticket(s)

none

### Description

#11420 ensures support for customizing the L0 nav items, but it doesn't account for the `navLinks` property. This PR adds that support, and it also includes a test to make sure L0 customization is working as expected.

## To test

1. Visit this Codepen example: https://codepen.io/jakaeser/pen/LYavrKK
2. See that the custom L0 nav items are not applying.
3. Comment out the v2 latest CDN <script>, then uncomment the deploy preview CDN <script>
4. Verify the custom L0 nav items apply.
5. In the Pen's JS, replace the `l0Data` property with `navLinks`. Verify the custom L0 items still apply.

### Changelog

**New**

- Adds an e2e test for customizing L0 items.

**Changed**

- Supports `navLinks` property when using `<c4d-masthead-container>` and customizing L0 items.
- Corrects the prefixes used in masthead e2e tests.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/masthead/__stories__/README.stories.mdx

@@ -86,11 +86,11 @@ document.getElementById('masthead').platformUrl = urlObject;
 
 ### Custom navigation
 
-In order to set custom navigation for the masthead, use JavaScript to set the `navLinks` property of the masthead-composite component. This property should be an array of `L0MenuItem` objects as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts).
+In order to set custom navigation for the masthead, use JavaScript to set the `l0Data` property. This property should be an array of `L0MenuItem` objects as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts).
 
 ```html
-<c4d-masthead-composite
-  id="masthead"></c4d-masthead-composite>
+<c4d-masthead-container
+  id="masthead"></c4d-masthead-container>
 ```
 
 ```javascript
@@ -125,7 +125,7 @@ const customNavData = [
     },
   },
 ];
-document.getElementById('masthead').navLinks = customNavData;
+document.getElementById('masthead').l0Data = customNavData;
 ```
 
 #### Custom data endpoint
@@ -383,14 +383,14 @@ This array will be passed into the `scopeParameters` property. If using
 the `.`), in order for the array to be processed properly in the component.
 
 ```html
-<c4d-masthead-composite
-  .scopeParameters="${scopeParameters}"></c4d-masthead-composite>
+<c4d-masthead-container
+  .scopeParameters="${scopeParameters}"></c4d-masthead-container>
 ```
 
 Alternatively, JavaScript can be used to insert it into the component.
 
 ```javascript
-document.querySelector('c4d-masthead-composite').scopeParameters =
+document.querySelector('c4d-masthead-container').scopeParameters =
   scopeParameters;
 ```
 

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -540,7 +540,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
   protected _renderLeftNav() {
     const { platform } = this;
     const menu: any[] = [];
-    const menuItems = this._getl0Data();
+    const menuItems = this.getL0Data();
     const autoid = `${c4dPrefix}--masthead__l0`;
     const level0Items = menuItems?.map((elem: L0MenuItem, i) => {
       // Instantiate bucket for first level submenus.
@@ -885,14 +885,14 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
    */
   protected _renderTopNav() {
     const { selectedMenuItem, menuBarAssistiveText, activateSearch } = this;
-    return !this._getl0Data()
+    return !this.getL0Data()
       ? undefined
       : html`
           <c4d-top-nav
             selected-menu-item=${selectedMenuItem}
             menu-bar-label="${ifNonEmpty(menuBarAssistiveText)}"
             ?hideNav="${activateSearch}">
-            ${this._getl0Data().map((link, i) => {
+            ${this.getL0Data().map((link, i) => {
               return this._renderNavItem(link, i, `${c4dPrefix}--masthead__l0`);
             })}
           </c4d-top-nav>
@@ -1414,7 +1414,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
   /**
    * Temporary getter to fetch data until navLinks prop is phased out.
    */
-  private _getl0Data() {
+  public getL0Data() {
     const { l0Data, navLinks } = this;
     if (navLinks) {
       console.warn(

packages/web-components/src/components/masthead/masthead-container.ts

@@ -95,7 +95,7 @@ export function mapStateToProps(
   const { language } = localeAPI ?? {};
   const { translations } = translateAPI ?? {};
   const { request } = profileAPI ?? {};
-  const { l0Data: userL0Data } = self;
+  const getUserL0Data = self.getL0Data.bind(self);
 
   // Attempt to collect data from current/new and deprecated locations.
   let endpointl0Data;
@@ -123,7 +123,7 @@ export function mapStateToProps(
     {
       // Respect user-set L0 data. Otherwise, progressively enhance to new shape.
       l0Data:
-        !language || userL0Data
+        !language || getUserL0Data()
           ? undefined
           : endpointl0Data.current || endpointl0Data.deprecated,
       // Progressively enhance to new profile items shape.