Adjust ReactiveHTML css resources for relative paths

panel/reactive.py

@@ -1633,6 +1633,11 @@ def _process_param_change(self, params):
         props = super()._process_param_change(params)
         if 'stylesheets' in params:
             css = getattr(self, '__css__', []) or []
+            if state.rel_path:
+                css = [
+                    ss if ss.startswith('http') else f'{state.rel_path}/{ss}'
+                    for ss in css
+                ]
             props['stylesheets'] = [
                 ImportedStyleSheet(url=ss) for ss in css
             ] + props['stylesheets']

panel/tests/ui/io/test_resources.py

@@ -0,0 +1,36 @@
+import pytest
+
+try:
+    from playwright.sync_api import expect
+
+    pytestmark = pytest.mark.ui
+except ImportError:
+    pytestmark = pytest.mark.skip("playwright not available")
+
+from panel.config import panel_extension as extension
+from panel.pane import Markdown
+from panel.tests.util import serve_component
+
+
+def test_serve_page_on_nested_route(page):
+    md = Markdown("Initial")
+
+    msgs, _ = serve_component(page, {"/foo/bar": md})
+
+    expect(page.locator(".markdown").locator("div")).to_have_text("Initial\n")
+
+    md.object = "Updated"
+
+    expect(page.locator(".markdown").locator("div")).to_have_text("Updated\n")
+
+    assert [msg for msg in msgs if msg.type == "error"] == []
+
+
+def test_serve_page_with_reactive_html_css_on_nested_route(page):
+    def app():
+        extension(notifications=True, template='material')
+        Markdown("Initial").servable()
+
+    msgs, _ = serve_component(page, {"/foo/bar": app})
+
+    assert [msg for msg in msgs if msg.type == "error"] == []