我最近开始更喜欢单个 .js 文件形式的可重用 UI 模块，它使用 div.innerText 操作 dom等等。我正在开发各种 UI 框架 (a new and better one I swear)我计划允许其他开发人员编写他们自己的模块来扩展我的框架。
为确保两个开发人员的工作不会相互干扰，我正在使我的模块独立。然后，因为它们是独立的，我可以快速甚至递归地将它们部署到页面上的任何 div 中；例如调用uiElement.deploy(element)设置可重用 uiElement将元素作为父元素，通过如下代码:
uiElement.deploy=function(root){
uiElement.div=document.createElement("div");
uiElement.div.innerHTML=`
<style>
button{
background:red;
}
</style>
<button>Hey!</button>`;
root.appendChild(uiElement.div);
}
一切都很好，但在样式方面，我对声明 <style> 有点谨慎innerHTML 中的元素，因为它们可能会对我的其他可重用模块的样式产生不利影响。
所以，我想知道，为什么 HTML 标准没有决定如果你放一个 <style> <head> 以外容器中的元素，它只对容器的 child (即 style 标签的 sibling )及其后代进行操作？促进代码可重用性感觉是个好主意。
顺便问一下，我该如何避免上述问题？我目前的想法是给 div 一个唯一的 ID，然后在我的 <style> 中编辑 css。标记，通过使用正则表达式解析 innerHTML。
最佳答案
CSS 代表级联样式表。 层叠 表明它被倾倒在从根节点开始的每个元素上:document。规范指出任何 style - 元素始终应用于整个 document。
我对将自己的样式应用于元素的问题的解决方案。然而，这个解决方案并不优雅，可以更好地解决，因为无论何时添加元素，它都会使文档充满样式元素。
uiElement.deploy=function(element, className){
uiElement.div=document.createElement("div");
uiElement.div.innerHTML=`
<style>
button.${className}{
background:red;
}
</style>
<button class="${className}">Hey!</button>`;
element.appendChild(uiElement.div);
}
更好的方法是添加一个 link 元素，该元素指向一个包含有关您的代码的样式信息的 css 文件。
uiElement.deploy=function(element, className){
uiElement.div=document.createElement("div");
//link element - if not present in document: add.
if (!document.querySelector(`link[href='location/${element}.css']`))
{
const link = document.createElement("link");
link.href = `location/${element}.css'`;
document.head.appendChild(link);
}
uiElement.div.innerHTML=`
<button class="${className}">Hey!</button>`;
element.appendChild(uiElement.div);
}
样式表文件 (.css) 还可以更轻松、更灵活地管理代码，如果您只想更改视觉外观，则无需更改 js 文件。
即使在上述情况下，我也强烈建议为您创建的元素设置一个唯一的 ID 或类名，以便在您的 CSS 规则中有所不同，因为 CSS 规则对整个文档都有效。
关于javascript - 获取 <style> 标签 css 只对 sibling 和 child 进行操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54764046/