Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minimum level depth #4

Open
dawidchyrzynski opened this issue Jul 11, 2017 · 2 comments
Open

Minimum level depth #4

dawidchyrzynski opened this issue Jul 11, 2017 · 2 comments

Comments

@dawidchyrzynski
Copy link

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.

@gmmorris
Copy link
Owner

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

@LukeTOBrien
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants