simmerjs
simmerjs copied to clipboard
Minimum level depth
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.
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:
- The DOM you're querying on
- The selector you're expecting
- The selector Simmer is returning
Thanks
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:
-
div#container > div > h1
-
div#container > h1
Does this make sence to you?
What do you think?