深入了解Shadow DOM：從shadow-root開始

一、ShadowRoot Link CSS

在Web開發中，分離結構、樣式和行為是一項重要的原則。使用Shadow DOM可以將HTML代碼以及CSS樣式保護起來，防止與外部樣式衝突。下面是一個簡單的例子：

    <html>
      <head>
        <style>
          span {
            color: red;
          }
        </style>
      </head>
      <body>
        <div>
          <span>This text should be red.</span>
        </div>
        <script>
          // create a shadow root
          var shadow = div.shadowRoot;
          // attach some content to the shadow root
          shadow.innerHTML = '<span>This text should not be red.</span>';
        </script>
      </body>
    </html>

在上面的例子中，span元素設置了樣式color: red;，但是在shadow root內部動態插入了不同的span元素，我們可以看到該元素的樣式並沒有被應用到動態插入的元素上。

二、Shadow Root Closed

通過ShadowRoot的closed屬性可以控制是否可以在外部訪問Shadow DOM內部的元素和樣式。如果設置了該屬性為true，則在外部代碼中就無法訪問shadow-root中的內部元素。

    <div id="host"></div>
    <script>
      var div = document.getElementById("host");
      // create a shadow root
      var shadow = div.attachShadow({mode: "open"});
      // attach some content to the shadow root
      shadow.innerHTML = '<div>This content is inside the shadow root.</div>';
      // trying to read the shadow root results in null
      var shadowRoot = div.shadowRoot; // null
    </script>

在上面的例子中，當我們嘗試訪問shadow-root時，會得到null。

三、ShadowRoot Is Not Defined

在前面的例子中，我們通過shadowRoot來訪問Shadow DOM內部的元素。在某些情況下，瀏覽器可能不支持該API，這時候我們可以使用getCSSCanvasContext()或者createShadowRoot()來獲取Shadow DOM。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ShadowDOM Test</title>
        <script>
          if(!HTMLElement.prototype.createShadowRoot) {
            HTMLElement.prototype.createShadowRoot = HTMLElement.prototype.webkitCreateShadowRoot;
          }
        </script>
      </head>
      <body>
        <div>I'm a web component!</div>
        <script>
          // create a shadow root
          var shadow = div.createShadowRoot();
          // attach some content to the shadow root
          shadow.innerHTML = '<p>This is some dynamic content</p>';
        </script>
      </body>
    </html>

在上面的例子中，我們通過判斷當前瀏覽器是否支持createShadowRoot() API，如果不支持則手動實現Shadow DOM。

四、Shadow Roots

Shadow DOM允許創建多個獨立的ShadowRoot，這些ShadowRoot可以自成一個層級結構。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Multiple Shadow Roots</title>
        <script>
          var div = document.getElementById("host");
          // create a shadow root
          var shadow1 = div.attachShadow({mode: "open"});
          // attach some content to the shadow root
          shadow1.innerHTML = '<span>This content is in shadow root #1</span>';
          // create another shadow root
          var shadow2 = shadow1.createShadowRoot();
          // attach some content to the second shadow root
          shadow2.innerHTML = '<p>This content is in shadow root #2</p>';
        </script>
      </body>
    </html>

在上面的例子中，我們創建了兩個獨立的ShadowRoot，它們可以各自嵌套其他元素和ShadowRoot。

五、Shadow Root漂頭髮

Shadow DOM可以被應用於頁面元素的非常細微的樣式和交互動作，例如：漂頭髮效果，可以讓用戶預覽自己更改髮型的效果。代碼示例：

    <html>
      <head>
        <style>
          .hair {
            position: absolute;
            top: -70px;
            left: 50%;
            width: 50px;
            height: 120px;
            border-radius: 50%;
            background-color: black;
            transform: translateX(-50%) rotate(30deg);
            box-shadow: inset 0 0 0 20px black;
            z-index: 1;
          }
        </style>
      </head>
      <body>
        <div>
          <div id="hair"></div>
          <button id="change">Try it out!</button>
        </div>
        <script>
          // create a shadow root
          var div = document.getElementsByTagName("div")[0];
          var shadow = div.createShadowRoot();
          // attach some content to the shadow root
          shadow.innerHTML = '<style>.hair {background-color: red;}</style><div class="hair"></div>';
          // add a click listener to the button
          var button = document.getElementById("change");
          button.addEventListener("click", function() {
            // change the content of the shadow root
            shadow.innerHTML = '<style>.hair {background-color: rgb(255, 204, 102);}</style><div class="hair"></div>';
          });
        </script>
      </body>
    </html>

在上面的例子中，我們使用了一個Shadow DOM，通過改變Shadow DOM內部的樣式來實現「漂頭髮」效果。

六、Shadow Root優點

Shadow DOM的一個顯著優點是可以解決Web開發中的樣式依賴問題，同時避免類似名稱的結構在全局命名衝突。此外，ShadowRoot還可以重複使用，提高代碼的可讀性和可維護性。

七、Shadow Root選擇器選取

在Shadow DOM中選擇元素的方式與標準的CSS選擇器稍有不同。在選擇元素時，我們需要在選擇器前加上/:host()，並在該函數中添加選擇器。下面是一個例子：

    <style>
      /* standard CSS */
      span {
        color: yellow;
      }

      /* shadow DOM */
      :host(span) {
        color: red;
      }
    </style>

在上面的例子中，我們通過:host(selector)來選擇在Shadow DOM內的元素。

本文簡要介紹了Shadow DOM中的shadow root link css、shadow root closed、shadow root is not defined、shadow roots、shadow root漂頭髮、shadow root優點以及shadow root選擇器選取等內容。Shadow DOM可以有效保護HTML和CSS代碼不受外部樣式影響，同時也可以避免全局命名衝突問題，提高代碼的可讀性和可維護性。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/294151.html