Allow the style tag inside the template tag when the latter is used by a custom HTML tag / Web Component

Hi everyone,

In https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/ we have this rule:

don’t use inline style declarations

Although it’s not very clear, I assume this includes both:

• using the style attribute, e.g. style="color: red"
• using the style tag, e.g. <style>p {color: red}</style>

I think it’s a good rule, but I’d like to add an exception. When implementing custom HTML elements or Web Components, it’s convenient to use the <template> HTML tag to define the HTML structure. See Using templates and slots - Web APIs | MDN . If the custom HTML element / Web Component is simple, its CSS styles can be specified inside the same <template> element using the style tag. This resembles a bit how Vue components are defined for instance, see xwiki-platform/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/footnotes/LivedataFootnotes.vue at master · xwiki/xwiki-platform · GitHub , keeping the component styles in the same place as the component HTML structure (if they are simple enough).

So I’d like to change the rule to:

don’t use inline style declarations (neither the style HTML attribute nor the <style> HTML tab), with one exception:

• the <style> tag is a direct child of a <template> tag that is used to define a custom HTML element or Web Component

WDYT?

Thanks,
Marius

2 posts - 2 participants

Read full topic