atom/atom — pull request #4165 by nathansobo (2014-11-12 23:10:31+00:00)
Title: Make it easier to style atom-text-editor from outside its shadow root

Closes #4086

It needs to be easy to style text editors in a way that diverges from the current syntax theme when desired. Without the shadow DOM, this was simply a matter of overriding styles on the editor. With the shadow DOM, this has become harder, leading to problems like the following in the settings view:

![Settings view mini editors](https://cloud.githubusercontent.com/assets/1789/5020293/f3746d96-6a84-11e4-8ae4-473e98354f2c.png)

Ultimately, there's no avoiding the reality of the shadow DOM overriding text editor styling, but it should be as clean and simple as possible. This PR makes some changes to ensure any text editor can be styled as follows:

```less
atom-text-editor {
background-color: white;
color: black
}

atom-text-editor::shadow .cursor {
border-color: white;
}
```

In order to make this happen, syntax themes need to style the host element itself rather than a nested root node. This will allow external styles to easily override them. To encourage this change, I have removed the `.editor` class from the element at the root of the shadow DOM, replacing it with a `.editor--private` class to discourage any future use. Syntax theme authors now need to set the background color of the editor via the `:host` pseudo-selector, as follows:

```less
:host {
background-color: blue;
color: white;
}
```

They will also need to avoid scoping any other styles by the `.editor` selector. A simple approach that also supports the shadow DOM being disabled is to scope nested selectors under both `.editor` and `:host`:

```less
// This should be replaced...
.editor, :host {
.cursor { }
// more styles
}
```

I plan to open PRs on the top 30 syntax themes to make these small changes.