This doesn’t work properly in Firefox: `event.path` isn’t a thing, so clicking to open or close does nothing.
—
When dealing with Web Components, I think it’s worthwhile for you to consider their degraded state, for the benefit of while they’re loading, and if they fail to load (e.g. JS disabled, too-old browser, or a poor network connection). I personally have uMatrix installed and blocking most third-party JS, so your code from cdn.jsdelivr.net didn’t get loaded, and the content was just completely missing.
I’d even suggest considering whether to use <ul> and/or <li> for these, in one way or another. If not, perhaps it might be worthwhile having <scripture-list> strip all text nodes inside it, considering only <scripture-passage> elements, and get in the habit of putting a semicolon after passages that aren’t the last in the list: that way the fully-degraded experience will be “2 Timothy 1:9; James 1:18”.
—
The `api` attribute feels more verbose than is ideal: I imagine that most uses will have only a single value through the page. Therefore I recommend making it optional, with some other way of specifying a default, with my first-thought strawman syntax being <meta name="scripture-api" value="crosswayApi">. (You may have observed that I took the liberty of lifting it from the passage up to the list in the last example I showed.)
Yes, thanks for pointing out the `event.path` problem. It's been resolved now.
Good thoughts on the graceful degradation. I'll put some thought into it. As well as the API reference!
Ya, I played around with nesting <scripture-passage>es inside the <scripture-list>, but couldn't find a good way to access the text nodes inside the passage. Prob just needed a bit more work though, I do like it better from a semantic POV.
When all you want is the text, disregarding any further markup, just use `.textContent`. Otherwise, look through `childNodes` for any with nodeType 3 (Node.TEXT_NODE).
It could also be a scripture-list, yes. It depends on the UI you want, has nothing to do with whether the references are from the same book. If you want a list of different passages where each can be expanded separately then use scripture-list. If you want them to always show together use this version . I could change things to make that more clear.
Your `api` attribute recommendation is nice. I've seen similar attributes needed to specify access keys, like for the <google-map> element. <meta name="google-maps-key" value="..."> is a lot nicer.
event.path is from the "v0" APIs, that should be event.composedPath().
I started this originally to learn Web Components, and for my own personal website (jordan.shurmer.family). I assume other devs out there would benefit from this and have a lot of contributions to add as well, glad it's getting a bit of attention!
—
When dealing with Web Components, I think it’s worthwhile for you to consider their degraded state, for the benefit of while they’re loading, and if they fail to load (e.g. JS disabled, too-old browser, or a poor network connection). I personally have uMatrix installed and blocking most third-party JS, so your code from cdn.jsdelivr.net didn’t get loaded, and the content was just completely missing.
How might this be improved, then?
The answer is clear to me: shift the reference from an attribute into a text node: How about the list? Semantically this feels odd: it’s one element, but it should be multiple. How about this instead: I’d even suggest considering whether to use <ul> and/or <li> for these, in one way or another. If not, perhaps it might be worthwhile having <scripture-list> strip all text nodes inside it, considering only <scripture-passage> elements, and get in the habit of putting a semicolon after passages that aren’t the last in the list: that way the fully-degraded experience will be “2 Timothy 1:9; James 1:18”.—
The `api` attribute feels more verbose than is ideal: I imagine that most uses will have only a single value through the page. Therefore I recommend making it optional, with some other way of specifying a default, with my first-thought strawman syntax being <meta name="scripture-api" value="crosswayApi">. (You may have observed that I took the liberty of lifting it from the passage up to the list in the last example I showed.)