1. 注意:在 Atom 1.13 中删除了 Shadow DOM 。下面介绍的 `:host` 选择器将不起作用,不应该再使用。

升级语法主题

文本编辑器的内容是在 shadow DOM 中渲染,shadow DOM 用于保护内容的样式不被全局样式表所污染。有关 shadow DOM 的更多背景信息,请查看 HTML 5 Rocks 上的 shadow DOM 101

语法主题是专门用于设置文本编辑器内容的样式,因此在启用文本编辑器的 shadow DOM 时,它们会自动直接加载到文本编辑器的 shadow DOM 中。当主题的 package.json 包含 theme:"syntax" 声明语句时将会自动渲染内容,因此不需要改变任何内容来适应目标的上下文。

当主题样式表加载到文本编辑器的 shadow DOM 中时,想要从外部以编辑器为目标的选择器将不起作用。以 .editor.editor-color 类为目标的样式需要以 :host 伪元素为目标,该伪元素与包含的 atom-text-editor 节点相匹配。有关 :host 伪元素的更多信息,请参阅 shadow DOM 201 上的文章。

这里有一个来自 Atom 的 light 语法主题的例子。请注意,从外部以编辑器为目标的 atom-text-editor 选择器已被保留下来,用于当禁用 shadow DOM 时允许主题在过渡阶段保持工作状态。

  1. atom-text-editor, :host { /* :host added */
  2. background-color: @syntax-background-color;
  3. color: @syntax-text-color;
  4. .invisible-character {
  5. color: @syntax-invisible-character-color;
  6. }
  7. /* more nested selectors... */
  8. }