CSS自定义属性设置Shadow DOM中的样式实例页面

展示

代码

• HTML：

  <h4>默认Shadow DOM创建的按钮</h4>
  <ui-button>按钮</ui-button>
  
  <h4>外部CSS改变Shadow DOM创建的按钮样式</h4>
  <ui-button type="parmary">按钮</ui-button>

• CSS：

  [type="parmary"] {
      --ui-button-border: 1px solid transparent;
      --ui-button-background: deepskyblue;
      --ui-button-color: #fff;
  }

• JS：

  [].slice.call(document.querySelectorAll('ui-button')).forEach(function (ele) {
      var shadow = ele.attachShadow({ mode: 'closed' });
  
      shadow.innerHTML = `<style>
  button {
      padding: 9px 1em;
      border: var(--ui-button-border, 1px solid #ccc);
      border-radius: var(--ui-button-radius, 4px);
      background-color: var(--ui-button-background, #fff);
      color:  var(--ui-button-color, #333);
  }
      </style>
      <button>${ele.textContent}</button>`;
  });