html - 封装页面CSS中的元素

Question

我正在尝试通过以下方式封装页面样式的 View :

<style type="text/css">
  
    *:not(.component) > button, *:not(.component) > span, *:not(.component) > p{
    		background: green;
    	}
    
    </style>
     
    <div class="component">
    	<button>Button</button>
    
    	<span>Span</span>
    
    	<p>Paragraph</p>
    </div> 

我想将上面的 css 简化为:

*:not(.component) > button, span, p{
            background: green;
        }

这仅适用于 button 的条件。

另外我想知道这种“封装”是否会影响性能？

任何帮助将不胜感激!

Answer 1

如果你对一点 JS 持开放态度，你可以利用 Shadow DOM它会自动确定标记的范围。您可能需要使用 webcomponent polyfill取决于您的目标受众，直到它具有更好的浏览器支持。

var shadow = document.querySelector('.component')
  .attachShadow({
    mode: 'open'
  })
shadow.innerHTML = `
    <button>Button</button>
    <span>Span</span>
    <p>Paragraph</p>
`

p {
    background: green;
  }

<div class="component">
</div>

<div>
  <button>Button</button>
  <span>Span</span>
  <p>Paragraph</p>
</div>