Re: [css-selectors] Tagname based substrings

On Wed, Apr 6, 2016 at 11:48 AM, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

> On Tue, Apr 5, 2016 at 9:59 AM, Davis, Greg <greg.davis@pearson.com>
> wrote:
> > Hi all,
> > In my ongoing investigation of web components, I'm finding a place where
> I
> > want to target a substring of a tagname to keep the authoring semantic.
> That
> > is, when I author my tags like this:
> > <x-navigation />
> > <x-quiz />
> > etc...
> >
> > I want to namespace to them so they have shared attributes like fonts,
> etc.
> > I can't find a way in the documentation on attribute substrings, but
> might
> > just be missing it. Is there a way to target a tagname? I'm thinking like
> > this:
> >
> > *[tagname^="x-"] { ... }
>
> Is this just a matter of wanting to style all of your custom elements
> in a particular way?  Or do you need to distinguish between groups of
> custom elements?
>

I would say both cases are valid in their own way. Say, one group is this:
<x-forms-login>
<x-forms-cart>

And another group is:
<x-admin-login>
<x-admin-navigation>

My first target will be at x-* to set up all components to have a bright
blue border and a rainbow background. However, I want all my admin
components to have a red background so people know they are in admin land,
so then my next selector becomes x-admin-*.

Does that make sense?

-Greg


>
> ~TJ