From bbaf908bb236e421a52b984048fc64cd725eaa2c Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Mon, 17 Nov 2014 11:36:41 -0700 Subject: [PATCH] Add example links --- docs/upgrading/upgrading-your-ui-theme.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 81805af3e..dbebd4932 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -55,6 +55,8 @@ atom-text-editor::shadow .highlight.my-linter { } ``` +Check out the [find-and-replace][https://github.com/atom/find-and-replace/blob/master/stylesheets/find-and-replace.less#L10] package for another example of using `::shadow` to pierce the shadow DOM. + #### /deep/ The `/deep/` combinator overrides *all* shadow boundaries, making it useful for rules you want to apply globally such as scrollbar styling. Here's a snippet containing scrollbar styling for the Atom Dark UI theme before shadow DOM support: @@ -112,9 +114,11 @@ my-ui-theme/ index.atom-text-editor.less # loaded in the text editor shadow DOM ``` +Check out this [style sheet](https://github.com/atom/decoration-example/blob/master/stylesheets/decoration-example.atom-text-editor.less) from the decoration-example package for an example of context-targeting. + Inside a context-targeted style sheet, there's no need to use the `::shadow` or `/deep/` expressions. If you want to refer to the element containing the shadow root, you can use the `::host` pseudo-element. -During the transition phase, style sheets targeting the `atom-text-editor` context will *also* be loaded globally, but that will change once the option to disable the shadow DOM is removed. +During the transition phase, style sheets targeting the `atom-text-editor` context will *also* be loaded globally. Make sure you update your selectors in a way that maintains compatibility with the shadow DOM being disabled. That means if you use a `::host` pseudo element, you should also include the same style rule matches against `atom-text-editor`. [shadow-dom-101]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom [shadow-dom-201]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/