simmerjs icon indicating copy to clipboard operation
simmerjs copied to clipboard

Minimum level depth

Open dawidchyrzynski opened this issue 7 years ago • 2 comments

Hi, I'm struggling with one small problem. In some cases Simmer generates selector only with tag name. For example, if I have only one "strong" tag in the DOM tree Simmer generates "strong" selector without any additional selectors. Is there any way to specify minimum level depth of the selector? I know that "strong" is unique selector but would be nice if Simmer could generate more detailed selectors. I tried to set specificity threshold but without expected effect.

dawidchyrzynski avatar Jul 11 '17 14:07 dawidchyrzynski

Hey, The specificity should do it, but if not I'll definitely take a closer look. Can you provide a reproducible example? Specifically it'll help me if you provide:

  1. The DOM you're querying on
  2. The selector you're expecting
  3. The selector Simmer is returning

Thanks

gmmorris avatar Jul 11 '17 14:07 gmmorris

Hello,

I was just going to post almost the issue, so instead of creating a new one I add it here.
I was going the call my issue Forced depth

In my situation I am creating a WYSIWYG editor and i'm using SimmerJs to create style sheet rules instead of having inline styles.

Say I have the following structue:

<div id="continer">
    <div>
        <h1>Hello there</h1>
    </div>
</div>

When the user clicks on the <h1> and I run Simmer I get the selector h1.

Then the user append a new heading to the container:

<div id="continer">
    <div>
        <h1>Hello there</h1>
    </div>
    <h1>Goodbye</h1>
</div>

When the user clicks on the new <h1> this selector is the same as the the previous one h1.
(Note: That subsequent clicks on the first <h1> return div > h1 as the selector, so the depth is only taken into consideration when the element name is not unqiue.)

In my real world case I am using Scope.
What I would ideally want is to force the depth to be taken into consideration, up to and including the Scope element.
So, if I scope to #container, the selectors for my two headings will be:

  1. div#container > div > h1
  2. div#container > h1

Does this make sence to you?
What do you think?

LukeTOBrien avatar Jul 07 '19 10:07 LukeTOBrien