In Odoo 17, which uses the OWL (Odoo Web Library) framework, the issue you're encountering seems related to the lifecycle of the OWL components, specifically with the interaction between the onMounted hook and how the Notebook component re-renders its pages.

When you interact with a Notebook (such as switching tabs), OWL might re-render the content inside the Notebook, which can reset the DOM modifications you made in the onMounted hook. Since OWL's rendering process is reactive, it can re-apply the original state as defined in your component's template when the component re-renders.

Solution

To ensure that your dynamic styles and modifications persist even after interacting with the Notebook, you need to use a combination of OWL's lifecycle hooks and event listeners to apply these changes every time the Notebook re-renders or changes pages.

Here’s how you can approach it:

1. Use the onPatched Lifecycle Hook

The onPatched lifecycle hook can be used to reapply the modifications whenever the component is re-rendered.

2. Handle Notebook Tab Change

You should also ensure that your styles are reapplied when the user switches between Notebook tabs. You can do this by adding an event listener for the Notebook tab changes.

3. Ensure that the CSS selectors you use to target elements inside the Notebook pages are precise and correctly reference the elements you want to modify. The this.el.querySelector method searches within the component’s root element, so make sure the selectors match the structure of your Notebook component.