封装来自页面css的元素

Question

我试图通过以下方式封装来自页面样式的视图：

<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，具体取决于您的目标受众，直到它有更好的浏览器支持。

＆＃13;

＆＃13;

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

＆＃13;

p {
    background: green;
  }

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;