I have this basic custom element example. It is working in Chrome, however not in Firefox. Is there a way to get it working in Firefox (without polymer but maybe some kind of polyfill)?
I also enabled the dom.webcomponents.enabled flag without any success.
Update:
Since this is solved, I created a repository, with the complete code:
https://github.com/peplow/webcomponent-example/
Custom element html file:
<template id="template">
<button id="button">Hallo</button>
<style media="screen">
button{
color:red;
}
</style>
</template>
<script>
var localDoc = document.currentScript.ownerDocument;
class toggleButton extends HTMLElement{
constructor(){
super();
this.shadow = this.attachShadow({mode: 'open'});
var template = localDoc.querySelector('#template');
this.shadow.appendChild(template.content.cloneNode(true));
this.shadow.querySelector('button').onclick = function(){
alert("Hello World");
}
}
static get observedAttributes() {return ['name']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'name') {
this.shadow.querySelector('#button').innerHTML = newValue;
}
}
}
customElements.define('x-toggle', toggleButton);
</script>
File where it is used:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="element.html">
<meta charset="utf-8">
</head>
<body>
<x-toggle name="Hello World"></x-toggle>
</body>
</html>
As of June 2018, Firefox support for Custom Elements can be enabled with the following steps
Type in the search bar about:config.
search for dom.webcomponents.shadowdom.enabled click to enable.
serch for dom.webcomponents.customelements.enabled click to enable.
Hope this helps someone out there.
UPDATE:
Now, since Firefox 63, Custom Elements are supported in Firefox by default.
Firefox has not yet shipped Custom Elements v1, which is the latest standard and is what specifies customElements.define() as the way to define an element (as opposed to v0 which used document.registerElement() and is what is available with the dom.webcomponents.enabled flag in Firefox).
Chrome is currently the only browser that supports Custom Elements v1 natively, but all other major browsers are supportive of it.
Firefox has an open bug for Custom Elements v1 support.
In the meantime, your best bet is to use the Custom Elements v1 Polyfill for browsers that don't support it. You can feature-detect Custom Elements v1 support with 'customElements' in window.
Related
I don't want to use styles from style.css, so I decided to remove style.css from DOM. This work just fine in Firefox and IE8, but not in IE6:
$("LINK[href='http://www.example.com/style.css']").remove();
Any other solution, with jQuery?
Here is example:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("link[href*='style.css']").remove();
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">...</div>
</body>
</html>
And here is CSS (style.css):
#content {
background-color:#333;
}
Only in IE #content is still dark. :(
Maybe is jQuery bug?
This is not a bug in jQuery, it is a bug (or possibly, a feature) of the IE rendering engine.
It seems this problem is being caused by the fact that Internet Explorer does not correctly re-render the page after removing the LINK element from the DOM.
In this particular case, the LINK tag is no longer present at the DOM, but IE still displays the CSS that has been loaded into memory.
A workaround / solution for this is to disable the stylesheet using the .disabled property like this:
// following code will disable the first stylesheet
// the actual DOM-reference to the element will not be removed;
// this is particularly useful since this allows you to enable it
// again at a later stage if you'd want to.
document.styleSheets[0].disabled = true;
EDIT in reply to your comment:
Or, if you want to remove it by the href use the following code:
var styleSheets = document.styleSheets;
var href = 'http://yoursite.com/foo/bar/baz.css';
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].href == href) {
styleSheets[i].disabled = true;
break;
}
}
Perhaps it's something strange IE6 does to URL in the href attribute? Try something like:
$("LINK[href*='style.css']").remove();
(i.e. check whether the href value contains "style.css")
It's just a guess, however. If that doesn't work, I recommend checking the JQuery documentation closely on the subject of attribute selectors and the remove method.
Also keep in mind that it's also not impossible that it's in fact a bug. (IE6 in general causes lots of issues involving JavaScript and DOM manipulation, among other things.)
Topic's quite old, but You can only add ID to your link element, and delete it by element:
$("#id").remove();
Maybe using lowercase on the tag name?
Why does this button not work on ios? It works fine on desktop and android. It works on ios if clickHandler is defined as a regular function.
http://codepen.io/CalebEverett/pen/RRmYgx
<html>
<head>
<style>
button {
width: 150px;
height 50px;
}
</style>
</head>
<body>
<div id="testdiv">it doesn't work</div>
<button id="do">Button</button>
</body>
<script>
const clickHandler = () => {
document.getElementById("testdiv").innerHTML = "it works!"
}
document.getElementById("do").addEventListener("click", clickHandler, false);
</script>
<html>
You are using an arrow function, which is an ES6 feature.
Support for ES6 in general and arrow functions specifically is not yet widespread, and is limited to recent versions of some browsers only. Specifically, Safari does not support arrow functions on either Desktop (Mac) or mobile (iOS), but many other browsers will have the same issue (including older Android browsers, IE, etc.).
You'll have to either transpile your ES6 code to something that is supported more widely, or stick to more standard Javascript.
I'm trying to implement the features from this site. But my code isn't alerting anything when I click on the x-foo element. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
</head>
<body>
<script type="text/javascript">
var xFoo = document.createElement('x-foo');
var xFoo = new XFoo();
document.body.appendChild(xFoo);
xFoo.onclick=function(){alert("It works!")};
</script>
<x-foo>
Test
</x-foo>
</body>
</html>
Any suggestions? (I'm on Chrome)
It looks like you're trying to create a Custom Element but you haven't registered it yet. To create your own XFoo element would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Custom Element</title>
</head>
<body>
<!-- Create a template for the content inside your element -->
<template>
<h1>Hello from XFoo</h1>
</template>
<!-- Register your new element -->
<script>
var tmpl = document.querySelector('template');
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
</script>
<!-- Use the element you've just registered as a tag -->
<x-foo></x-foo>
<!-- OR, create an instance using JavaScript -->
<script>
var el = document.createElement('x-foo');
document.body.appendChild(el);
</script>
</body>
</html>
Unfortunately this approach depends on native APIs which currently only ship in Chrome 34. As someone else mentioned, a much easier approach to creating your own custom element would be to use Polymer. Polymer is a library that adds support for Web Components (essentially what you're trying to build) to all modern browsers. That includes IE 10+, Safari 6+, Mobile Safari, current Chrome and current Firefox.
I've put together a jsbin which shows how to create your own x-foo element using Polymer.
You should try viewing the following article:
http://www.polymer-project.org/
It's an open source Github project. I actually tried that article, but don't recommend it. Instead, use the link given above. It uses Ajax and JSON.
I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.
Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});