How Do You Add CSS Attributes to OJS Chunks?

[mrworthington]

Description

I am wondering if there's a more elegant way to add a CSS ID attribute to an OJS cell chunk than the following, which is currently the best I can come up with. On the Quarto Docs site, I don't seem to find anything that allows you to add an id to an OJS cell chunk. Primarly, my reason is that—in a Quarto Dashboard—wrapping an OJS cell with a div so it can have the necessary CSS ID will add an outerbox that introduces a whole other set of problems.

If there's a way, I'm happy to learn, but have struggled to identify an elegant approach to tagging ojs cell chunks with a CSS ID attribute or CSS class.

---
title: "div_reprex"
format: dashboard
---

## {.toolbar}

This is some stuff in a toolbar

## Section 

## Row {height=50%}

### Column

<div id ="my-plot-id">

```{ojs}
//| content: card-toolbar
//| echo: false
//| title: "This is Card 1"

viewof letter_select = Inputs.select(["A", "B", "C"], {label: "Select A Letter:"})

```

```{ojs}
//| echo: false

Plot.plot({
  height: 200,
  style: 'font-size:1.5rem',
  marks: [
    Plot.frame(),
    Plot.text([{}], {
    x: 1,
    y: 1,
    text: d => `This is a chart about the letter ${letter_select}`,
    frameAnchor: "middle"})
  ]
})
```
</div>

### Column

```{ojs}
//| content: card-toolbar
//| echo: false
//| title: "This is Card 2"

viewof number_select = Inputs.select(["1", "2", "2"], {label: "Select A Number:"})

```

```{ojs}
//| echo: false

Plot.plot({
  height: 200,
  style: 'font-size:1.5rem',
  marks: [
    Plot.frame(),
    Plot.text([{}], {
    x: 1,
    y: 1,
    text: d => `This is a chart about the letter ${number_select}`,
    frameAnchor: "middle"})
  ]
}) 
```

## Row {height=50%}

This is a row of some other stuff

[jimjam-slam]

I don't know if it's mentioned in the OJS reference, but you can add an id attribute to an OJS chunk and it'll appear as the top-level ID attribute in the HTML:

Test test test

```{ojs}
//| label: some-label
//| id: some-id
//| classes: some-class

[1, 2, 3, 4, 5]
```

Test test test

(The label attribute appears to become the ID for the output of the cell, where as the id attribute becomes the ID for the wrapper around both the echoed source and the output.)