Testing Totally Information's web-components - data-list

Ready for extended use. Documentation: data-list. Version: --.

Data is updated dynamically using JavaScript. Some addition changes happen after a 4, 6, and 8 second delays.

1) Items added dynamically using JavaScript with object input

Bullet style is set manually to disclosure-closed using a style attribute to set the --list-style CSS variable.

Data is added dynamically by script once the page has fully loaded.

After 4 seconds, the second entry is amended and a new entry is added. After 6 seconds, the list type is changed to ol and after 8 seconds, the list style is changed to upper-roman.

2) Items added dynamically from a global object variable

Data is added dynamically using a global object variable. Attributes are used to set the type to ol and the key/value separator to " - ".

The list type is changed to ul after 6 seconds and the list style is changed to disclosure-open after 8 seconds.

3) Items added dynamically from a global array variable

Data is added dynamically using a global object variable. Attributes are used to set the list style to a custom style of "'➡️'".

After 4 seconds, the third entry is amended and a new 10th entry is added.

4) Nested lists

Data is added dynamically using a global object variable.

This list contains nested entries. The third entry is an object with sub-entries (depth=2) itself containing an array of sub-entries (depth=3).

The level 3 sub-list has a custom list style set to "➡️" by a CSS style definition in the page's head section.