Allow linkStyle background-color attribute to override edgeLabel class background-color

[Chris Bloom]

Description

I would expect the following code to render the connector line in green, the label in red, and the label background in blue:

graph LR
  A -->|It's the missing link!| B
  
  linkStyle 0 color:red,background-color:hotpink,stroke:green,fill:yellow;

In the rendered HTML, the color attribute is forwarded to the .edgeLabel node and applied as an inline style, thus overriding the default edgeSpan class color. However, the background-color attribute is added to the connector path node inline style, even though path elements do not have a background-color style, only a fill style. I would expect the background-color attribute to be forwarded to the .edgeLabel node along with the color.

<g class="root">
  <g class="clusters"></g>
  <g class="edgePaths">
    <!--
    The background-color attribute is applied here, to the path node, which cannot use it
    -->
    <path marker-end="url(#graph-div_flowchart-pointEnd)" style="background-color:hotpink;stroke:green;fill:yellow;"
      class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0"
      d="M24.438,19.5L40.454,19.5C56.471,19.5,88.505,19.5,119.656,19.5C150.806,19.5,181.073,19.5,196.207,19.5L211.341,19.5">
    </path>
  </g>
  <g class="edgeLabels">
    <g transform="translate(120.5390625, 19.5)" class="edgeLabel">
      <g transform="translate(-71.1015625, -12)" class="label">
        <foreignObject height="24" width="142.203125">
          <div xmlns="http://www.w3.org/1999/xhtml" style="color: red; display: inline-block; white-space: nowrap;">
            <!--
            The color attribute is applied here, but the background-color is missing even though it can use it
            -->
            <span style="color:red;" class="edgeLabel">It's the missing link!</span></div>
        </foreignObject>

Steps to reproduce

1. Replicate the example graph definition above in a mermaid compatible editor
2. View the rendered workflow
3. Observe that the connector text label background retains the default color from the .edgeLink CSS class

Screenshots

Screenshot showing rendered connector with background-color attribute ignored

Screenshot showing rendered HTML with color attribute applied but no background-color attribute.

Code Sample

Example in live editor

Setup

• Mermaid version: v10.9.0, v11.0.0-alpha.7+e68125e
• Browser and Version: Chrome for Mac OS X

Suggested Solutions

Given that the path element does not have a background-color style attribute, I would expect the background-color attribute to be forwarded to the .edgeLabel node along with the color attribute.

Additional Context

No response

[Chris Bloom]

In fact, I'd argue that anything other than a fill, stroke, and stroke-width style attribute in a linkStyle definition should be forwarded to the edgeLabel node since those are the only three style attributes a path element respects.