[BUG] Double drawn border if style and customRender combined

[matecode]

Describe the bug: If i combine style and customRender i get an unexpected result of a double drawn border. I don't want to rule out the possibility that I made a mistake, but i think more its a bug ;)

HTML to reproduce the issue:

    <div class="outer">
       <div class="inner">
       Test
       </div>
    </div>

Html widget configuration:

Html(
      shrinkWrap: true,
      data: *the above html content*,
      style: {
        ".outer .inner": Style(
          border: Border.all(color: Colors.blue, width: 1),
          padding: const EdgeInsets.all(20),
          backgroundColor: Colors.red,
        ),
      },      
      customRender: {
        "div": (context, child) {
          return child;
        }
      },
    );

Expected behavior: Only one border is drawn around the inner div

Screenshots:

Device details and Flutter/Dart/flutter_html versions: flutter_html: ^2.2.1 • Flutter version 2.5.3 • Dart version 2.14.4

A picture of a cute animal (not mandatory but encouraged)

[tneotia]

This would likely be a bug in our html parser package (dart html) if this is the case, because it would match your selector to the outer class as well. We don't have any algorithm internally for matching a selector to the element.

[matecode]

As I'm not an CSS extpert, the style ".outer .inner" should apply the border only to the inner div, right? As you mentioned i guess there is a bug. Can I further help to fix it? I had a look into custom_render.dart, but I could figure out quick what the problem could be. Let me know if I can help on another end (maybe sending cute animals)

[Sub6Resources]

Seems to be an issue with the descendant combinator. Perhaps try .outer > .inner?