Here we delve into the realm of Angular 2 selectors, comparing Custom tags versus Custom attributes in relation to SEO and browser rendering.
Upon embarking on my Angular 2 journey and altering the selector to '[my-component]' (attribute selector) instead of 'my-component' (tag selector), I encountered a dilemma concerning HTML validation. While it may not adhere strictly to standards, it was an acceptable compromise for the sake of usability.
However, a conflicting viewpoint emerged from the Angular team advocating for tag selectors due to performance considerations, prompting me to reassess my approach.
The W3C's disapproval of non-standard HTML usage raised concerns beyond mere validation errors - particularly regarding the impact on SEO. How would search engines interpret sites with <custom-make-believe-tags> compared to standard HTML tags? Would it affect rankings and visibility?
Another crucial aspect is how browsers handle CSS styling within custom components:
Building a SPA site with Angular 2 introduced complexities when reconciling the component tree with conventional HTML structure. Two options arose, exemplified by the <video-listing-component>: embedding existing HTML or styling directly within the custom tag. Both methods achieved the desired layout visually, but behavioural nuances still persisted.
The puzzling behaviour exhibited by custom tags, such as occupying zero space in the DOM while maintaining proper rendering, prompted further contemplation. Are these outcomes merely coincidental or indicative of stable rendering across various browsers?
Whether styling should be applied directly to custom components or kept separate remains a point of contention, raising questions about best practices and potential pitfalls.
In light of these uncertainties, the need for clarity and consistency in handling custom tags and CSS properties becomes apparent to ensure long-term stability and usability across different platforms and browsers.