How to use with Shadow DOM

[threepointone]

How to use with Shadow DOM

[threepointone]

while I could do that, I wouldn't encourage it, you might run into css precedence issues (ah browser quirks). better you'd use merge, and then pull the id out of that idFor(merge(orange, black))

[threepointone]

alright, I'll get to this later today, will ping here when I got something. Thank you so much for the feedback! I'm happy you're trying my lib, and I appreciate your issues :)

[threepointone]

good q, I don't have a strong answer for this right now, not too familiar with shadow dom etc. I'll read up; do you have any links I could read?

[treshugart]

Safari has a good writeup of the v1 API being released in Safari 10 and Chrome 53: https://webkit.org/blog/4096/introducing-shadow-dom-api/. A good cheat sheet is http://robdodson.me/shadow-dom-css-cheat-sheet/.

Basically, you must create a <style> tag in your shadow root in order to style elements within it. The only things that cross the shadow boundary are inherited things like font-family and the like.

[threepointone]

would a cssFor(rule) helper, um, help? so you could merge() the rules you want, take the literal css, and then do as you please. because of the way we hash rules etc, it shouldn't cause issues if it's also in main document head.

[treshugart]

That could possibly work. What would an expanded API look like for it?

[threepointone]

something like this, let's say -

import { cssFor, attribsFor, style } from 'glamor';

const div = document.createElement('div');
let orange = style({ backgroundColor: 'orange' })
let black = style({ backgroundColor: 'black' })

div.attachShadow({ open: true });
div.shadowRoot.innerHTML = `
  <style>${cssFor(orange, black)}</style>
  <div ${attribsFor(orange)}>
    <span ${attribsFor(black)}>in shadow root</span>
  </div>
`;

edit - replaced idFor with attribsFor

[treshugart]

That would be awesome.

[treshugart]

Would be nice if idFor() could accept multiple arguments and return an object so it'd work with {...idFor(orange, black)}.

EDIT

Or if it's passed a string, return a string. If it's passed an array, return your standard object that style() or merge() would.

So:

idFor(orange);
idFor([orange, black]);

[treshugart]

That sounds good.

[threepointone]

just fixed the previous dep issue, will be on this tonight, sorry for the delay!

[treshugart]

No need to apologise. Thanks for the update!

[threepointone]

Alright then. So I got in 2 helpers named cssFor and attribsFor for the above, and have pubbed a new version (2.2.2). (idFor returns just the id, while you'll need a whole data-attribute, hence attribsFor). specifically, the code from my previous example above 'works' (I edited it to reflect the name change). some notes -

• not heavily tested, and the internal implementation is pretty naive for now
• haven't documented this in the readme, will do once we nail the api
• attribsFor accepts n rules, and will spit out n attribs; nb: it doesn't merge it into one rule.

a quick output example

import { attribsFor, cssFor, style, merge } from './src/index'

let red = style({ color: 'red' })
let blue = style({ color: 'blue' })

let merged = merge(red, blue)

console.log(cssFor(red, blue, merged))
/* 
[data-css-16y7vsu]{ color:red; } 
[data-css-po2wuq]{ color:blue; } 
[data-css-9kt9a5]{ color:blue; } 
*/

console.log(attribsFor(red, blue, merged))
/* 
data-css-16y7vsu="" data-css-po2wuq="" data-css-9kt9a5="`16y7vsu + `po2wuq"
*/

let me know feedback, bugs etc, and I'll iterate on this.
(we could start with a better name for attribsFor ugh :P)

[treshugart]

Naming is the hardest problem in programming :). I generally abbr attributes as attrs. You could also use props, but that'd probably be somewhat more obtuse because they're really attributes.

I'll bump my version and have a play. Thanks again for being so responsive and for all your great work thus far!

I'll leave this open for now, but feel free to close.

[treshugart]

I see the changes in your src but I think you may have forgotten to run npm run build before publishing? All I see in lib/ and umd/ is idFor() which I'm guessing already existed.

If you just do npm publish, is it worth making npm run build a prepublish script?

[threepointone]

pubbed 2.2.3, and will add a prepublish script. sorry and thank you for debugging :( :(

[threepointone]

added, fixed.

[treshugart]

Epic! I've been using this feature and it's working great, so far.

[threepointone]

oh yay, finally :) I'll rename attribsFor to attribs (or something else) later today and post an update here.

[treshugart]

FWIW, I reckon if you're keeping the For suffix on the rest of the utilities, then it might make sense to keep it? No strong opinion, though.

[threepointone]

I'm open to suggestions for idFor, cssFor as well. But... I must say, the more I type it, the nicer it looks (to me). Might just be desensitized. Will defer taking a decision on this specific bit to later.