javascript - 用户如何在不知道其组成方式的情况下在 AngularJS 中设置元素指令的样式？

Question

首先，抱歉我的英语不好。

最近在学习AngularJS，发现AngularJS的很多概念都非常高级，尤其是Directive。这很像 Shadow DOM或 Web Components ，甚至更好。

但是我想出了一个关于指令的问题(我们只讨论带有'E'限制的指令，并且有一个模板可以替换或插入这里的指令。)

即:指令用户(不是指令的编写者)如何在不知道指令如何符合的情况下设置指令的样式？用户如何确保他的样式不会覆盖指令的样式？

如您所知，指令是一个可重用的组件，很多时候，用户不是指令的编写者，他只是使用指令。

这里说一个案例:像这样用 HTML 编写的指令:

<myDirective></myDiective>

我会被下面的 Emmet 表达式替换(或者更复杂):

div>h1+ul>li*8>a+img

问题来了，用户如何设置这个myDirective的样式？用户不知道指令的 DOM 结构。

1. 当它被模板替换时，他是否应该检查 devtools 中的指令，然后为替换的 DOM 设置样式？

2. 或者他应该去查看指令的源代码？

3. 如果用户设置指令样式，他应该如何避免覆盖？

4. 或者指令编写者应该使用它的命名空间来设计指令样式？

我觉得这是AngularJS Directive应该面对的一个大问题。

请注意，这与 Shadow DOM 不同。或 Web Components由于后者的样式不能被用户覆盖，处于隔离样式范围内。

Answer 1

要设置 html block 的样式，无论代码是什么，您都必须至少看到一次实际操作。捕获标记，然后继续设置样式。大多数情况下，您可以在模板属性中看到代码。 (大多数时候，其他一些标记是一个组合)。非常希望标记不包含特定的类，这样当您(用户)开始为其设置样式时，就不必面对任何样式问题。

如果您是指令代码的所有者，那么事情应该非常简单。更重要的是，您可以为 templateUrl 属性指定一个 url，该属性只包含给定指令的 html 代码。

我还鼓励您应用 OOCSS 技术来设计可重用对象的样式。并且建议避免使用您在帖子中指定的选择器，它们的性能不佳。

关于您的问题:

1 和 2，是的，它们是有效的选项。3 和 4，研究 OOCSS 技术和 CSS Specificity 概念。

希望对你有帮助，

最好的问候。