Stenciljs: route to new content and cannot change background

问题

I'm currently creating my first PWA with Stencil, PWA Toolkit and Ionic 4. I can not explain myself a behavior when switching from one page (ion-content) to another page. Here the situation:

CSS 1st page (app-home):

ion-content {
         --background: pink;
            }

CSS 2nd page (app-data):

ion-content {
         --background: white;
}

With the statement:

this.router.push ('/data', 'forward');

the app changes from page 1 to page 2. But the background remains pink and does not change as expected to white. When I refresh the url “/data” the background becomes white. When I then return to the first page the background remains white.

What am I doing wrong?

回答1:

It works this way because there are no css scoping in Stencil by default so rule for the for ion-content selector is applied twice in your page.

You need to prepend each style with a component selector to correctly scope them.

For example:

app-home ion-content {
  --background: pink;
}