[playground] New context example with element that both consumes and provides #1315
Conversation
|
A live preview of this PR will be available at the URL(s) below. https://pr1315-b3ec3bf---lit-dev-5ftespv5na-uc.a.run.app/ |
augustjk
force-pushed
the
new-context-example
branch
from
d107641 to
b3ec3bf
Compare
|
nevermind, found https://pr1315-b3ec3bf---lit-dev-5ftespv5na-uc.a.run.app/playground/#sample=examples/context-consume-provide |
|
Discussed offline that I think it's not 100% best practice for a user to define a class field |
|
Synced with @justinfagnani offline on how we might make the example more interesting and added a numbering prefix to all the headings. We had originally talked about doing alternate numbering system based on level like roman numerals, alphabet, arabic number, etc. but I came across this https://typographyforlawyers.com/hierarchical-headings.html and figured simple is better. |
| }, | ||
| }); | ||
|
|
||
| private get _siblingNumber() { |
There was a problem hiding this comment.
I'd be a bit weary using this over an <ol> even if it's for the sake of example. What about counting the number of h3s? like <h3>this is the 5th h3</h3> if it doesn't get too complex
There was a problem hiding this comment.
Is it possible to do this kind of numbering with <ol>s?
There was a problem hiding this comment.
Ah, I guess it is possible... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters#example-of-a-nested-counter
There was a problem hiding this comment.
AH sorry the preview site didn't finish building and I thought it was simple numbering. This looks good
There was a problem hiding this comment.
The point of this is you can do it across sections of your application though. The example doesn't show it but presumably there'll be content in between the headings and making that entire thing a <li> doesn't seem right? But of course the numbering can still be done with css counter so that does make this example less compelling.
augustjk
force-pushed
the
new-context-example
branch
from
8ed5b34 to
29766b3
Compare
augustjk
force-pushed
the
new-context-example
branch
from
5e2261d to
f086a29
Compare
Example is taken from the React doc https://react.dev/learn/passing-data-deeply-with-context
which is also an excellent resource for describing what context does and when to use it.
My only concern with this is that it's such a direct copy of the React doc example, even if I attribute to them at the top of the preview page.
my-heading.tsgets a manually made.jsfile because we don't have a good transform for the@consume()decorator.latest preview link: http://localhost:5415/playground/#sample=examples/context-consume-provide