Feature request / help: sb-mark inside components

[mitras2]

Hello there,

I know that strawberry is is not very common. But I love the simple, build free vanillaJS style that it hasand would like to use it for some smaller personal projects.
As strawberry is not used very much out there, it is hard to find answers to my question on the web - so forgive me that I post it here.

I am starting to use strawberry and wrote a component/template like this:

<template name="task-list">
  <sb-block>
    <div>
      Tasks:<br>
      <span sb-mark="motivationalMessage" ></span>
      <ul>
        <li sb-mark="tasks.#">No open tasks</li>
      </ul>
    </div>
  </sb-block>
</template>

While it felt like a natural use of the syntax to just use sb-mark inside my template/component it seems not to be working at all.
Instead I need to use slots and then bind the content into these slots in the normal html - which feels kind of clunky.

So my current working solution looks like this:

<template name="task-list">
  <sb-block>
    <div>
      Tasks:<br>
      <slot name="motivationalMsg" ></slot>
      <ul>
        <slot name="tasks"><li>No open tasks</li></slot>
      </ul>
    </div>
  </sb-block>
</template>

<!-- In the HTML body -->
<task-list>
  <span slot="motivationalMsg" >Today is the right day!</span>
  <li slot="tasks" sb-mark="tasks.#" ></li>
</task-list>

Can you maybe tell me why the first approach is not working and why?
Is is possible to add that functionality to strawberry? It would make things so much easier.

(I already when though neary all of the strawberry code - and while I understand quite some bits of it, I do not get to the point where I could start to implement that behavior un my own)

Thanks in advance for all information
mitras2

[18alantom]

Hey, thanks for the question and thank you for showing interest :)

---

To answer your question of why it doesn't work, it is because a custom element's DOM is not accessible using document.querySelectorAll. In Strawberry the elements to be updated are found using a query like this:

document.querySelectorAll(`[sb-mark="motivationalMessage"]`); 

To find marked elements under the shadow root, one would have to query the all the custom elements in use like so:

customElement.shadowRoot.querySelectorAll(`[sb-mark="motivationalMessage"]`); 

It shouldn't be too difficult a change to implement.

---

It had been a while since I'd looked at this project. Returning to it got me thinking and I ended up taking the difficult decision to archive this project (reasoning).