[BUG] SVG inside `Div` - Styles not respected

[bell-symok]

trafficstars

Software versions

Python version : 3.10.13 (main, Aug 24 2023, 12:59:26) [Clang 15.0.0 (clang-1500.0.40.1)] IPython version : 8.26.0 Tornado version : 6.4.1 Bokeh version : 3.5.0 BokehJS static path : [redacted]/venv/lib/python3.10/site-packages/bokeh/server/static node.js version : v21.1.0 npm version : 10.2.0 jupyter_bokeh version : 4.0.5 Operating system : macOS-14.5-x86_64-i386-64bit

Browser name and version

Google Chrome Version 126.0.6478.127 (Official Build) (x86_64)

Jupyter notebook / Jupyter Lab version

Jupyter Lab 4.0.13

Expected behavior

I would expect the font specified in an SVG to appear the same when that SVG is included in a Div.

Observed behavior

The font specified in an SVG is not the same when the SVG is included in a Div. See screenshots below.

Example code

from pathlib import Path

from bokeh.io import output_file, save
from bokeh.models import Div

svg = """<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <text x="100" y="100" font-family="Courier">hello</text>
</svg>"""

# SVG output for debugging
Path("hello.svg").write_text(svg)

# bokeh output
div = Div(text=svg, width=200, height=200)
output_file("output.html")
save(div)

Stack traceback or browser console output

No response

Screenshots

hello.svg:

output.html:

I would expect the font in output.html to be the same as in hello.svg.

[mattpap]

Given the priority of element-level styles, I would expect this to work:

<text x="100" y="100" font-family="Courier">hello</text>

but we get this:

However, this:

<text x="100" y="100" style="font-family: Courier;">hello</text>

works as expected:

I would expect both to be equivalent. What we do in our base stylesheet is pretty standard way of dealing with CSS' defaults. An easy way out would be to add :not(svg) to the relevant rules, but then we wouldn't be able to apply our default.