panel-set

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.

garlic
onion (8oz)
crushed tomatoes (24 oz)
water (4 cups)
carrots (4 large chopped and peeled)
celery (2)
extra virgin olive oil (1/3 cup)
lentils (2 cups)
italian sausage (1 pound)
salt (1 tsp)
pepper (2 tsp)
basil (2 tsp)
oregano (2 tbsp)

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

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

panel-set experiment demo

Lentil Soup

Ingredients

Directions

Nutritional Information