Customize Folium Control Layer After Rendering

Description:
I am integrating the streamlit static folium map within a page and am trying to customize the Control Layer (legend). Through Chat GPT and Stackoverflow, I’ve found that I can edit the folium default css classes (successful). However I’d like to take the customizability one step further. I’d like to customize each label within the Control Layer. Chat GPT generated some javascript code for me that uses the Event Listener. From my understanding, the map is created and then the JS code looks for all the labels and updates the colors to the users choice. Then the folium map is finally outputted on the screen with folium_static().

Problem:
The issue is that the individual label customization does not work. Editing the classes with folium.folium._default_css.append() does in fact work. Running the code outside of streamlit also works. So it seems like streamlit is the culprit, but I am unsure why or how to even troubleshoot that.

Notes:
python=3.10
streamlit=1.31.0
folium=1.9.5

Base Code:

import folium
import pandas
import requests
from streamlit_folium import folium_static
import webbrowser


state_geo = requests.get("https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_states.json").json()
state_data = pandas.read_csv("https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_unemployment_oct_2012.csv")

css_file_url = "https://Path/To/Github/Pages/File.css"

css_classes = [
    ('leaflet-control-layers', css_file_url),
    ('leaflet-control-layers-label', css_file_url)
]

# Append each class to Folium's default CSS
for label, css_file_url in css_classes:
    folium.folium._default_css.append((label, css_file_url))

m = folium.Map(location=[48, -102], zoom_start=3)

folium.Choropleth(
    geo_data=state_geo,
    name="choropleth",
    data=state_data,
    columns=["State", "Unemployment"],
    key_on="feature.id",
    fill_color="YlGn",
    fill_opacity=0.7,
    line_opacity=0.2,
    legend_name="Unemployment Rate (%)",
).add_to(m)

# Add layer control
folium.LayerControl(collapsed=False).add_to(m)

js = """
<script>
function changeLabelColors() {
    var labels = document.querySelectorAll('.leaflet-control-layers label');
    if(labels.length > 0){
        // Example: Change the first label color to red
        labels[1].style.color = 'red';
        // Add similar lines for other labels, adjusting indices and colors
    }
}
// Ensure the changeLabelColors function is called once the document is fully loaded
document.addEventListener('DOMContentLoaded', changeLabelColors);
</script>
"""

script = folium.Element(js)
m.get_root().html.add_child(script)

Without Streamlit

...
m.save("map.html")
webbrowser.open("map.html")

With Streamlit

...
folium_static(m)

image