Shadow DOM syntax theme question


#1

I’m a bit confused:

Do I do this:

.editor::shadow {
   @media (-webkit-min-device-pixel-ratio: 2) {
    font-size: 12px;
  }
}

or this

  .editor: :host {
   @media (-webkit-min-device-pixel-ratio: 2) {
    font-size: 12px;
  }
}

#2

“:host” is the new selector for the editor, “.editor” is the old one, so for now to refer to both you would do:

.editor, :host {
   @media (-webkit-min-device-pixel-ratio: 2) {
    font-size: 12px;
  }
}

I think this is what you are trying to achieve. Note the comma between .editor and :host


#3

Another example, for changing selection colour in a syntax theme:

.editor.is-focused .selection .region, :host.is-focused .selection .region {
  background-color: @syntax-selection-color;
}

#4

Also, this article is great, talks about :host. Does a lot more than I thought. There’s a 101, and 301 in this article series also :smile:

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/


#5

Thanks. I was just confused by this post: http://blog.atom.io/2015/01/05/enable-shadow-dom.html

Which does not use :host but uses ::shadow


#6

Yeah it is confusing, I don’t know. I was only following instructions from here:
https://atom.io/docs/latest/upgrading/upgrading-your-syntax-theme


#7

If you need a bit of insight about shadow DOM I posted a quick explanation of the :host, :shadow things:


#8

I’m still new to Shadow DOM, but how I understood the :host selector: It isn’t for reaching outside the Shadow DOM, it’s the selector for its root element. Because if you’re inside a Shadow DOM, you don’t know the class name that the element will have. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

Edit: I’m curious if there is actually a way to reach outside the Shadow DOM, but maybe not. Because that’s the reason why using it. So that other components can’t mess with your styles. Just reaching into it is possible with ::shadow since you’re the one using the component and might want to customize it.


#9

This article talks about a ::content pseudo-element that in some cases allows you to target Light DOM nodes from inside a Shadow DOM? I don’t know … I’ve just started being comfortable with ::shadow and :host … I’m not loading my brain up with this yet, but thought I would pass on the pointer.


#10

@leedohm Light DOM? Ohh… there is also a good guy. :innocent: After a quick read… it might be that Web Components allow you to have “less protected” elements (Light DOM) where it’s ok that outside styles get applied. Hmm… interesting… but ya… I’ll leave that for another day.


#11

Something to keep in mind when creating themes is that:

  • UI themes get loaded outside of atom-text-editor and are meant for styling stuff like tree-view, tabs, status-bar etc.
  • Syntax themes get loaded inside of atom-text-editor and are meant for styling stuff like the gutter, guides, syntax highlighting etc.

So you rarely have to cross the Shadow DOM barrier used for atom-text-editor. Here ::shadow vs :host in the context of Atom:

::shadow

-> Reach into the Shadow DOM

atom-text-editor::shadow .gutter { /* ... */  }

This styles the gutter from outside the Shadow DOM, like from a UI theme. But as said above, styling the gutter should be done in the syntax theme. There you can just use .gutter { /* ... */ }.

:host

-> Select the root element inside a Shadow DOM

:host  { /* ... */  }

This styles the root element from inside the Shadow DOM. In Atom’s case the atom-text-editor element when used in a Syntax theme. Typically background and color.


Shadow DOM and syntax themes
#12

Ok, so just adding in case no one reads the article I linked to :smile:

:host() looks very cool and useful (haven’t used it yet)

:host(.good) {
color: green;
}
:host(.bad) {
color: red;
}

Might be more useful for “apps” where you know the element will get certain classes applied to the custom-element. Also, can be instructed in the api of the custom-element to use such a class (but then why not do html attributes?)


#13

Also, I think it’s more helpful to think of

:host as the selector to “this” when referenced from within the element.

whereas something like:

custom-element {

}
would be done from outside.

Also think of
custom-element::shadow {
}
as very similar to customElement.shadowRoot.

Because if you have nested elements instead of having to do
elem1.shadowRoot.elem2.shadowRoot
you can do
document.querySelector(‘elem-1::shadow elem-2::shadow’);