Latest Update (also updated post title)
So I tracked down the issue to the old version of Mootools (which I cannot upgrade or remove due to project restrictions).
Mootools does the following, which is the code that causes the issue:
/*
Class: Abstract
Abstract class, to be used as singleton. Will add .extend to any object
Arguments:
an object
Returns:
the object with an .extend property, equivalent to <$extend>.
*/
var Abstract = function(obj){
obj = obj || {};
obj.extend = $extend;
return obj;
};
//window, document
var Window = new Abstract(window);
var Document = new Abstract(document);
The new definitions of Window and Document is what's breaking Polymer imports. Any suggestions on updating the code above to gracefully extend the Document/Window objects without breaking existing functionality?
OLD description below before I discovered the issue lies with mootools
I've already included the webcomponents.js script.
Then, when I have the for polymer.html, the errors below start appearing, and my polymer components doesn't work.
The components works in isolation using the polymer-cli. Anyone know what may be causing this issue?
EDIT: So this is what I have in my <head>
<script src="/media/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/media/bower_components/polymer/polymer.html">
(...sorry I cannot show more, private company code and what-not)
That's literally all I need in my page to raise the error mentioned above.
I'm starting to think there is some other javascript library (there's a lot) that might be interfering with Polymer, since I cannot replicate the issue on a brand new site.
I should also note, there are no 404's. The polymer.html file does get loaded as expected in the browser, I verified this in my network panel in developer console.
Related
I'm working on a lit-element project, and I got a problem that reset.css cannot be applied to web components wrapped with shadow-root
I've tried this way, and I got this following error.
Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The code I tried is this:
<script>
var css = new CSSStyleSheet()
css.replace('#import url("./style/static/reset.css")')
document.adoptedStyleSheets = [css]
</script>
this is put into a html file.
How can I avoid this error, and apply the reset.css to the web components?
Does it help to apply the replace import to the shadowroot as opposed to the document?
const node = document.createElement('div')
const shadow = node.attachShadow({ mode: 'open' })
shadow.adoptedStyleSheets = [sheet]
https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets
Edit -- addition for clarity:
The above addresses applying a style sheet possibly containing #import statements onto the frame to which your original question refers, the shadow-root node (element), however, because your code tries to apply the instantiated sheet to the document, to me, the question becomes a bit hazy.
The error you indicate seems indicative of code which attempts to apply a style sheet created in another document:
If you try to adopt a CSSStyleSheet that's constructed in a different Document, a "NotAllowedError" DOMException will be thrown.
https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md
I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522
I just updated my Chrome browser (Version 50.0.2661.75) and have found that the chrome://downloads page has changed such that my automated tests can no longer interact with it. Previously, I had been using Watir-Webdriver to clear the downloads page, delete files from my machine, etc, without too much difficulty.
It looks like Google is using Polymer on this page, and
there are new (to me) elements like paper-button that Watir-Webdriver doesn't recognize
even browser.img(:id, 'file-icon').present? returns false when I
can clearly see that the image is on the page.
Is automating a page made with Polymer (specifically the chrome://downloads page) a lost cause until changes are made to Watir-Webdriver, or is there a solution to this problem?
Given that the download items are accessible in Javascript and that Watir allows Javascript execution (as #titusfortner pointed out), it's possible to automate the new Downloads page with Watir.
Note the shadow root elements (aka "local DOM" in Polymer) can be queried with $$.
Here's an example Javascript that logs the icon presence and filename of each download item and removes the items from the list. Copy and paste the snippet into Chrome's console to test (verified in Chrome 49.0.2623.112 on OS X El Capitan).
(function() {
var items = document
.querySelector('downloads-manager')
.$$('iron-list')
.querySelectorAll('downloads-item');
Array.from(items).forEach(item => {
let hasIcon = typeof item.$$('#file-icon') !== 'undefined';
console.log('hasIcon', hasIcon);
let filename = item.$$('#file-link').textContent;
console.log('filename', filename);
item.$.remove.click();
});
})();
UPDATE: I verified the Javascript with Watir-Webdriver in OS X (with ChromeDriver 2.21). It works the same as in the console for me (i.e., I see the console logs, and the download items are removed). Here are the steps to reproduce:
Run the following commands in a new irb shell (copy+paste):
require 'watir-webdriver'
b = Watir::Browser.new :chrome
In the newly opened Chrome window, download several files to create some download items, and then open the Downloads tab.
Run the following commands in the irb shell (copy+paste):
script = "(function() {
var items = document
.querySelector('downloads-manager')
.$$('iron-list')
.querySelectorAll('downloads-item');
Array.from(items).forEach(item => {
let hasIcon = typeof item.$$('#file-icon') !== 'undefined';
console.log('hasIcon', hasIcon);
let filename = item.$$('#file-link').textContent;
console.log('filename', filename);
item.$.remove.click();
});
})();"
b.execute_script(script)
Observe the Downloads tab no longer contains download items.
Open the Chrome console from the Downloads tab.
Observe the console shows several lines of hasIcon true and the filenames of the downloaded items.
Looks like Google put the elements inside the Shadow-Dom, which isn't supported by Selenium/Watir/WebDriver spec (yet). There might a way to obtain the element via javascript (browser.execute_script(<...>)), but it is experimental at best still.
Attempting to automated a Polymer page, I found I was able to access the web elements by asking Polymer to use the shady dom by adding ?dom=shady in the URL. Like in the example on this page https://www.polymer-project.org/1.0/docs/devguide/settings:
http://example.com/test-app/index.html?dom=shady
Adding the dom parameter to request Polymer to use the shady dom may be worth a try.
In an attempt to create polymer elements that use requirejs modules I ran into a blocking issue. I understand that polymer is not designed to work with requirejs, but for the time being It is my only option.
Searching for answers I found two solutions:
Don't use requirejs and make your modules compatible with HTML imports.
Put Polymer() call inside the requirejs callback as described here
Since I have to use require, at least for the time being, I went with the solution no.2. However, it turns out the solution causes asynchronous delays of element registration and incorrect data binding prior to Polymer upgrading the element.
Digging deeper into this issue, I started hacking undocumented Polymer internals with an intention to stop Polymer entirely until requirejs does its thing. Here is what I came up with:
Polymer.require = function(tag, deps, func) {
var stopper = {}
Polymer.queue.wait(stopper);
require(deps, function() {
delete stopper.__queue;
Polymer.queue.check();
Polymer(tag, func.apply(this, arguments));
});
};
I know this is terribly wrong. Is there a better solution?
I found that if I embed the call to require within the Polymer script I avoid this issue.
<link rel="import" href="../polymer/polymer.html"/>
<script src="../requirejs/require.js"></script>
<script src="../something/something.js"></script>
<polymer-element name="some-component">
<template>...</template>
<script>
(function() {
Polymer('some-component', {
someMethod: function () {
require(['something'], function (Something) {
var something = new Something();
...
}
}
)();
</script>
</polymer-element>
So there's this solution from Scott Miles but I find it a bit simplistic and inflexible as it relies on:
<script> tags to be executed in order, therefore ruling out:
async script tags
xhr based script loading
polymer getting loaded from a <script> tag, therefore:
layout.html and associated css won't be loaded
any future call to polymer.html won't be deduped
If you want more control over your bootstrapping logic you will need to enforce some amount of synchronisation between your components (which is what both requirejs and polymer are competing to do) before those are fully loaded.
The previous example is a more declarative (read polymer) way of doing things but falls short of fine grained tuning. I've started working on a repository to show how you can fully customise your load ordering, by using a more imperative approach where requirejs is given priority to orchestrate the rest of the bootstrapping.
At the time of writing, this extra control comes at the price of worse performance as the various scripts can't be loaded in parallel but I'm still working on optimising this.
I built an excercise in flash cs5/as3. It draws its content from an xml-file.
Because I want to make it easy for other people to create their own excercise based on this swf, I want the actionscript to load the xml, with the filename based on a parameter in the html code.
In this case the xml is called oef01.xml
The link would look like this: BoFlitsOefening.swf?id=oef01
And the actionscript like this:
public function Main ()
{
//myFile is a string I declared earlier
myFile = LoaderInfo(this.root.loaderInfo).parameters["id"];
myFile += ".xml";
loadXml ();
}
function loadXml ():void
{
xmlLoader = new URLLoader(new URLRequest(bestand));
xmlLoader.addEventListener (Event.COMPLETE,xmlLoaded);
}
function xmlLoaded (event:Event):void
{
myList = new XML(event.target.data);
myList.ignoreWhite = true;
}
The construction is working fine in Internet Explorer but not in Firefox. I have done internet research but I could not find an explanation or a solution I was able to apply, though the issue is known.
Are you testing it on the server or locally - the URL in your browser should start with http:// not file:///?
It should work fine on the internet, while locally the URLs containing ? may not resolve properly.
In that case you may use FlashVars instead - you don't need to change the AS code, just HTML/JS.
And on a side note: you may try to embed the SWF file using SWFObject - some crossbrowsers issues are caused by wrong/buggy embedding code.
Also FireFox likes to keep external sources cached, so there's a likelihood that it's loading an old file. Make sure you clear the cache after updating the xml.
there is a way of tricking it to load it fresh every time by adding some junk after, like
.../my.xml?rand=001820018
where you generate the number randomly every time, if I remember correctly