我有一些适用于主按钮的CSS规则，我做了这样的事情：
.my-btn {
&--primary {
padding: 10px;
}
}
现在，我希望对“ sm”类的主按钮应用相同的规则，我可以执行以下操作：
.my-btn {
&--primary, &--primary.my-btn--sm {
padding: 10px;
}
}
这对我有用。但是我也想对“ sm”使用“＆”，就像这样：
.my-btn {
&--primary, &--primary.&--sm {
padding: 10px;
}
}
可能吗？
我正在开发一个应用程序,我将其他html网页加载到当前页面.其他网页是独立的应用程序.我正在尝试在shadow DOM中加载网页.为此,我使用了以下代码,它将尝试在shadowRoot中导入test-template.html.这里我没有使用模板标签,因为我要动态渲染模板(使用ajax).
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="loadTemplate()" value="Load template">
<div id="template-holder"></div>
<script>
function loadTemplate() {
var templateUrl = "test-template.html",
templateReceivedCallback = function(response) {
var div = document.getElementById('template-holder'),
shadowRoot = div.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML = response;
};
$.get(templateUrl, templateReceivedCallback);
}
</script>
</body>
test-template.html将如下所示:
<div>Hello from template</div>
<script>
alert("this text is from script inside of template")
</script>
我能够在当前页面中加载提到的test-template.html,但是test-template.html里面的javascript没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.