Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the elements. But I can't achieve that because of the sh...
In web components, to register an element you simply type:  var XFoo = document.registerElement('x-foo', {   prototype: Object.create(HTMLElement.prototype) });   To create an element you can do one of these:  <x-foo></x-foo>  var...
I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components...
I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check?  Or is there a way to get list of registered custom elements?  I do document.registerElement, but what else is there? Is...
I am creating a web component using native implementation, which in it's html template has links to images. However, those links only work if they are absolute, or relative to the main document, which means, that that component is not reusable, o...
I don't know how to make a disqus comments code to work inside of my custom elements.    Structure of my site:  | index.html --------\ my-app.html (custom element) ----------------\ my-testView1.html (custom element) ----------------\ my-testView...
dropdown menu is created in shadowDOM  almost perfect,  but the problem is how to hide the dropdown menu when click on any where else in window  class NavComponent extends HTMLElement {     constructor() {         super();          let template = doc...
Consider the following test-element web component definition (vanilla JavaScript running on Google Chrome, not Polymer), that creates a simple component with width=500px. Its attachedCallback function outputs its width to the console, and then sets u...
Using Web Components without any framework, what is the proper way to implement a custom event? For example, say I have a custom element x-pop-out that has a custom event of pop I would want all of the following to work:  <x-pop-out onpop="som...
If I had a script like this  <template id="x-foo-from-template">     <script src="/js/main.js"></script> </template>  <script>     customElements.define('my-header', class extends HTMLElement {...

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.