search

webtides / element-js

Simple and lightweight base classes for web components with a beautiful API
MIT License
26 stars 3 forks source link

Consider an SVG tagged function? #98

Open eddyloewen opened 1 year ago

eddyloewen commented 1 year ago

Lit and probably all other similar libraries have special behaviour for SVGs - should we also?

quarkus commented 8 months ago

Yup .. that would make sense .. maybe even before 1.0. I was creating an svg-element the other day (@next ) and had to return a plain string from the Template which worked fine but raised a type Warning as the JSDOC wants a Template Result to be returned :)

eddyloewen commented 8 months ago

Do you have some example code for what you where doing? I never know when I would need a svg tag function...

quarkus commented 8 months ago

Not really. Just ran into the issue that t was not possible to use the html as it was not returning the svg. Had to go with a plain string which felt kind of wrong ... so i thought maybe its a good idea to have a dedicated svg fn that we can enhance down the road.

eddyloewen commented 8 months ago

According to ChatGPT this is why Lit is using a dedicated svg tag function:

Yes, Lit includes an svg template tag function alongside the html tag function. This svg tag is specifically designed for defining SVG content within Lit templates. The reason for having a separate svg tag, rather than using the html tag for everything, relates to the nuances of how SVG (Scalable Vector Graphics) is parsed and manipulated within the browser's DOM (Document Object Model) compared to HTML.

Here are the main reasons why the svg tag is needed:

Namespace Correctness: SVG elements belong to a different XML namespace than HTML elements. While HTML elements belong to the HTML namespace, SVG elements belong to the SVG namespace. When creating SVG elements dynamically or through templates, it's important to ensure they are created within the SVG namespace. The svg tag function automatically handles this namespace issue, ensuring that the SVG elements are correctly recognized and rendered by the browser.

Parsing Rules: SVG content has different parsing rules than HTML. For instance, some self-closing tags in HTML (like <img>, <br>, and <input>) don't work the same way in SVG, where tags such as <path> need to be explicitly closed. The svg tag ensures that the content is parsed according to SVG rules.

Optimization and Clarity: Separating SVG and HTML content into different tag functions allows for more optimized processing of templates by Lit's rendering engine. It also improves the clarity and maintainability of the code, making it easier for developers to distinguish between SVG and HTML content.

I think it is ok to wait for this as we did not have any issues so far without a dedicated tag function. Should the need arrise - we can think about it again.