CSSの影響範囲を限定して、事故を防ぎたい

実現したいこと

CSSの影響範囲を限定して、事故を防ぎたい。

1：全ページ共有で利用するパーツに対するcss記述で、ページ固有のパーツに影響を及ぼしたくない
2：ページ固有のパーツに対するcss記述で、全ページ共有で利用するパーツに影響を及ぼしたくない

前提

headerタグもmainタグも、1ページにつき1回のみ使うとする。

発生している問題・エラーメッセージ

headerタグ内のお問い合わせ部分を.contactと命名したとする。(以下header-contactと呼ぶ)
mainタグ内の問い合わせ部分も.contactと命名したとする。(以下main-contactと呼ぶ)

main-contactの色だけ変更したくても、cssの記述順序や優先度によっては、header-contactまで変わってしまう。

逆のパターンも考えられる。
header-contactの色だけ変更したくても、cssの記述順序や優先度によっては、main-contactまで変わってしまう。

試したこと

1：mainタグに.mainと命名し、main内で使うセレクタには、先頭に「.main 」と追記して、.main内に影響範囲を留める。
↑しかし、これではcssが肥大する。また、ページ共有部分に.mainと命名したパーツがあった場合に事故が起こる。

2：headerタグを.header-contactと命名し、mainタグを.main-contactと命名し、セレクタの先頭にこれらのclass名を毎回親として記述するようにする。
↑しかし、これではcssが肥大する。また、ページ共有部分に.main-contactと命名したパーツがあった場合や、ページ固有部分に.header-contactと命名したパーツがあった場合に事故が起こる。

3：「css スコープ」で検索。shadow domという仕組みを発見。
↑しかし
https://qiita.com/alangdm/items/cec32f21151a9da3c3f2
を見ると、shadow domを使ってもLight DOM から Shadow DOMに影響を及ぼせたりするとのことで、これで解決するのかわからなくなりました。Light DOM内にスタイルを書かず、shadow dom内にスタイルを書くように心がければ、スコープを完全に分けられるのかと思いましたが、根拠となる文献を見つけられませんでした。

下記のソースコードで、<some-pages-share>と<this-page-only>の位置を逆にしたり、shadow_class1とshadow_class2の位置を逆にしても、ページ共有部分の.change_targetは必ず赤、ページ固有部分の.change_targetは必ず青になったので、「Light DOM内にスタイルを書かず、shadow dom内にスタイルを書くように心がければ、スコープを完全に分けられる」という認識はあっていたということなのでしょうか？

ただshadowdomを利用してもテンプレートに使ったタグ名は重複しないように心がけなければ事故が起こるという感じがしますね。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9</head>
10
11<body>
12
13<!--ページ共有部分ここから-->
14<some-pages-share>
15    <header slot="site_name">サイト名が入ります。</header>
16</some-pages-share>
17<!--ページ共有部分ここまで-->
18
19
20<!--ページ固有部分ここから-->
21    <this-page-only>
22        <h1 slot="title">このページ固有の題名です。</h1>
23        <div slot="content">このページ固有の内容です。</div>
24    </this-page-only>
25<!--ページ固有部分ここまで-->
26
27
28
29
30    <script>
31
32
33
34        class shadow_class1 extends HTMLElement {
35            constructor() {
36                super();
37                const shadow = this.attachShadow({ mode: 'closed' });
38                const wrapper = document.createElement('div');
39                wrapper.setAttribute('class', 'shadow_class');
40                wrapper.innerHTML = `
41                <style>
42                  .change_target{color:red;}
43                </style>
44                <p>▼▼▼▼▼ページ共通部分です▼▼▼▼▼▼▼</p>
45                <slot name="site_name">この文字は表示されないはずです</slot>
46                <p class="change_target">ここは何色になりますか？</p>
47                `;
48                shadow.appendChild(wrapper);
49            }
50        }
51        customElements.define('some-pages-share', shadow_class1);
52
53
54
55        class shadow_class2 extends HTMLElement {
56            constructor() {
57                super();
58                const shadow = this.attachShadow({ mode: 'closed' });
59                const wrapper = document.createElement('div');
60                wrapper.setAttribute('class', 'shadow_class');
61                wrapper.innerHTML = `
62                <style>
63                  .change_target{color:blue;}
64                </style>
65                <p>▼▼▼▼▼ページ固有部分です▼▼▼▼▼▼▼</p>
66                題名：<slot name="title"></slot><br>
67                内容：<slot name="content"></slot>
68                <p class="change_target">ここは何色になりますか？</p>
69                `;
70                shadow.appendChild(wrapper);
71            }
72        }
73        customElements.define('this-page-only', shadow_class2);
74    </script>
75</body>
76
77</html>