Fragments in 2-level bullet list (non-standard)

[tlyim]

It looks like that the current implementation of fragments does not work inside a bullet list.

For example, below will break a bullet list:

- item 1.0
::: {.fragment}
  - item 1.1
:::
  - item 1.2

And below will always show the leading bullet before the content of that bullet point is revealed next:

- item 1.0
  - [item 1.1]{.fragment}
  - item 1.2

Is there a simple way to achieve non-standard fragments in a 2-level bullet list like the minimum example below? ({.incremental} cannot do this)

MinimumExample.mp4

[mcanouil]

Tricky indentation and empty lines for the first ^^

1. With one fragment

   ---
   title: "Untitled"
   format: revealjs
   ---
   
   ## Title
   
   - item 1.0
   
     ::: {.fragment}
     - item 1.1
     :::
   
     - item 1.2
   
   

   Screen.Recording.2022-07-19.at.18.32.48.mov

2. With two fragments

   ---
   title: "Untitled"
   format: revealjs
   ---
   
   ## Title
   
   - item 1.0
   
     ::: {.fragment}
     - item 1.1
     :::
   
     ::: {.fragment}
     - item 1.2
     :::
   
   

   Screen.Recording.2022-07-19.at.18.34.23.mov

[tlyim]

@mcanouil Thanks for the answer. To use ::: {.fragment}, there must be an empty line before it. This also introduces an extra line before the bullet list. Is there not a way to avoid this unintended distortion while using ::: {.fragment}?

## Minimum Example

- item 1.0
  - item 1.1
  - item 1.2
- item 1.0
  - item 1.1
  - item 1.2

::: {.fragment}
- item 1.0

  ::: {.fragment}
  - item 1.1
  :::
  
  ::: {.fragment}
  - item 1.2
  :::
::: 

[mcanouil]

I am not sure it's possible since the fragment class is added by encapsulating the element in a div tag, thus this breaks the ul tag.

[mcanouil]

I found a hacky way (it's likely there is better way) in the right column.

See the code.

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## Minimum Example
::: {.columns}

::: {.column width="50%"}

- item 1.0
  - item 1.1
  - item 1.2

- item 1.0
  - item 1.1
  - item 1.2

::: {.fragment}
- item 1.0

  ::: {.fragment}
  - item 1.1
  :::
  
  ::: {.fragment}
  - item 1.2
  :::
:::

:::

::: {.column width="50%"}

<ul>
- item 1.0
  - item 1.1
  - item 1.2

- item 1.0
  - item 1.1
  - item 1.2

::: {.fragment}
- item 1.0

  ::: {.fragment}
  - item 1.1
  :::
  
  ::: {.fragment}
  - item 1.2
  :::
:::
</ul>

:::

:::

[mcanouil]

Another solution but not really local is to overwrite the css attributes adding the bottom margin at the end of a list.

---
title: "Habits"
author: "John Doe"
format: revealjs
include-after-body:
  text: |
    <style>
    .reveal .slide ul {
      margin-bottom: 0;
    }
    </style>
---

## Minimum Example

- item 1.0
  - item 1.1
  - item 1.2

- item 1.0
  - item 1.1
  - item 1.2

::: {.fragment}
- item 1.0

  ::: {.fragment}
  - item 1.1
  :::
  
  ::: {.fragment}
  - item 1.2
  :::
:::

[tlyim]

@mcanouil Thank you for suggesting the workarounds. Very helpful. Much appreciated.

[jimjam-slam]

Two other solutions:

If you want to reveal every item in the list in turn, use .incremental on the list:

::: {.incremental}
- Bananas
- Apples
  - Red apples
  - Green apples
- Grapes
- Kiwi fruit
:::

You lose control over precise order of reveals here, but it's quick.

Another is that you can apply .fragment to spans, not just divs:

::: {.myclass}
- [Bananas]{.fragment}
- [Apples]{.fragment}
  - [Red apples]{.fragment}
  - [Green apples]{.fragment}
- [Grapes]{.fragment}
- [Kiwi fruit]{.fragment}
:::

The downside of this approach is that the bullets will still be visible. You can't hide them by applying list-style-type: none to the surrounding div because they're already styled, but you could add some CSS targeting .reveal .myclass ul or similar (where .myclass is on your parent div) to remove the bullets.