panel-set experiment demo

An experimental custom element that wraps plain-old HTML (view the source) and decorates function, keyboard handling, accessibility information. It hopes to inform how we approach some kinds of new elements and efforts like OpenUI. It allows for an 'opt-in' UI that is similar to form controls, but by default doesn't provide much. It doesn't hide much from you either - you are in control of your light DOM, use JavaScript and CSS, it's ok. Resize your screen small, it will change the display to something 'accordion-like' - that's not built in, it is 5 lines of js you can add that just set an attributes based on a MediaQueryList. It should respond to DOM updates adding or removing elements too...

Adding a panel dynamically should be possible as normal DOM, it shouldn't lose focus if it is already set.
Removing a panel dynamically should be possible as normal DOM, it shouldn't lose focus if it is already set.

Lentil Soup



  1. In a large pot, heat extra virgin olive oil over medium heat
  2. Stir in the onions, carrots, and celery
  3. Cook and stir until the onion is tender
  4. Mix in garlic, oregano, and basil and cook for 2 minutes
  5. Stir in lentils, water, and tomatoes and bring to a boil
  6. Reduce heat and simmer for at least 1 hour
  7. Season to taste with salt and pepper

Nutritional Information

Nutritional Information
Lentil Soup
Servings Per Recipe: 6
Amount Per Serving
Calories: 349
% Daily Value *
Total Fat: 10g
15 %
Saturated Fat: 1.0g
Cholesterol: 0mg
0 %
Sodium: 131mg
5 %
Potassium: 970mg
27 %
Total Carbohydrates: 48.2g
16 %
Dietary Fiber: 22.2g
89 %
Protein: 18.3g
37 %
Sugars: 3g
Vitamin A: 4230IU
Vitamin C: 13mg
Calcium: 98mg
Iron: 6mg
Thiamin: 0mg
Niacin: 6mg
Vitamin B6: 1mg
Magnesium: 104mg
Folate: 334mcg
Percent Daily Values are based on a 2,000 calorie diet. Your daily values may be higher or lower depending on your calorie needs.
Nutrient information is not available for all ingredients. Amount is based on available nutrient data.
Information is not currently available for this nutrient. If you are following a medically restrictive diet, please consult your doctor or registered dietitian before preparing this recipe for personal consumption.
Powered by the ESHA Research Database © 2020, 
ESHA Research, Inc. All Rights Reserved
Read more about the approach or about why this is interesting and necessary