Decide on the HTML API of web-component
danieldietrich opened this issue · comments
Customized built-in element
<template is="web-component">
<!-- definition -->
</template>
Pros
- the native
<template>
is not rendered - concise (only one tag)
Cons
- not supported by Safari
- unfamiliar "is" syntax
Workarounds
- include polyfill for Safari (makes page slower)
Autonomous custom element
<web-component>
<template>
<!-- definition -->
</template>
</web-component>
Pros
- supported by all major browsers, including Safari
- familiar syntax
Cons
- more clutter to write
- web-component is rendered by the browser
Workarounds
- we could remove all web-components from the DOM after custom element definition but it would trigger page renders
- we could add
<style>web-component { display: none !important; }</style>
My feeling is that we should go back to <web-component>
because it is supported by all browsers.
Candid is unopinionated. We do not include polyfills or internally add additional styles to hide elements. It is the decision of the user to do so.