my-component:not([mounted]) {
// some style
}
I couldn't see any decent example of a combobox that behaves exactly as a select element. Any ideas? Cheers.
Hi! For some reason I can't access any attributes in my component's constructor. I'm running Firefox 76.0. Here is my component code:
class DateRepr extends HTMLElement {
constructor() {
super();
// create shadow the hedgehog
const shadow = this.attachShadow({ mode: 'open' });
// create a span
this.dateReprSpan = document.createElement('span');
// get the attributes
const rawReprFunction = this.getAttribute('data-repr-function');
this.reprFunction = new Function('date', rawReprFunction); // I know it's dangerous but it's local
console.log(rawReprFunction); // logs nullHere's how I define the component in HTML: <date-repr data-repr-function="return 'a'"></date-repr>
Can somebody tell me what's wrong? Thanks in advance.
this.dataset. It didn't work, outputting no data attribute values. I've made the component according to Mozilla's popup info component tutorial: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
defer attribute and it works
<script> tag looked like this:<script src="components/date-repr.js"></script>
registerElement() APIs. I plan on using the Custom Elememts (v1) Polyfill for browsers that need it, but are there any adapters available that would make webcomponents defined in the v0 syntax using registerElement() just work?
<template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
<script>
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
</script>
<div id="host"></div>
@cbranca I would say it depends on the context and how you expect it the component to be used. Anything that is JS only will limit you from using it whrn writing HTML. In my experience most web components are part of a larger JS applicatiin so having methods is acceptable.
Thank you @angrycat9000 . In my project the web components are complex widgets, we need methods and injection of a shared service's instance. I think that the approach does not follow the standard but, as you say, it is acceptable.