I'm having a hard time getting my polymer custom element to render content within a container <div> without the <div> showing up in the light DOM.
<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exitAnimation entryAnimation">
<link rel="stylesheet" href="animate-custom.css">
<template>
<style type="text/css">
...
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
...
</script>
</polymer-element>
renders as
<impress-slide>
<div> (Content) </div>
</impress-slide>
Can anyone give me some insight into how I can render the containing <div> in shadow DOM?
It depends on what browser & version you're using. Some of them have old versions of the Shadow DOM spec, and so Polymer has to polyfill it instead of using it natively to get the features it needs.
I'm using Chrome 33.0.1750.22 dev and Shadow DOM is still polyfilled for me unless I turn on the "Enable experimental Web Platform features" flag in about:flags.
Include
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
before polymer import to enable custom elements to render inside shadow dom aka #shadow-root
Related
I wanted to start to port my Polymer 1.0 application to Polymer 2.0 (preview).
I used <template is="dom-bind"> in my index.html to support data bindings. Is this also possible with Polymer 2? I tried <dom-bind> as a component, but it did not work.
In Polymer 2.0, make sure to wrap the <template> inside <dom-bind> as described in the upgrade guide. It's also important to include polymer.html, which imports dom-bind.html (instead of only polymer-legacy.html).
Polymer 1.0:
<template is="dom-bind" id="app">
...
</template>
Polymer 2.0:
<dom-bind id="app">
<template>
...
</template>
</dom-bind>
const app = document.getElementById('app');
app.message = 'Hello world!';
app.counter = 0;
app._onClick = function() {
this.counter++;
};
<head>
<base href="https://polygit.org/polymer+2.2.0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-bind id="app">
<template>
<div>[[message]]</div>
<div>[[counter]]</div>
<button on-click="_onClick">Increment</button>
</template>
</dom-bind>
</body>
I created a custom Polymer Dart element that extends another custom element. The parent element has a style defined containing a :host selector. When adding the parent element to the DOM, the style is applied as expected.
When extending the parent element and adding the child element to the DOM, the style defined for the parent element is not always applied. When testing the following code in Dartium v36.0.1985.97 (280598) or Chrome v35.0.1916.153, both elements are displayed with the proper style applied. When tested in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972), only the parent element has the style applied.
pubspec.yaml:
name: myapp
dependencies:
polymer: ">=0.12.0-dev <0.12.0"
transformers:
- polymer:
entry_points: web/index.html
index.html:
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<link rel="import" href="packages/polymer/polymer.html">
<!-- parent element -->
<polymer-element name="my-parent">
<template>
<style>
:host {
background:red;
}
</style>
<content></content>
</template>
</polymer-element>
<script type="application/dart" src="my-child.dart"></script>
<!-- child element -->
<polymer-element name="my-child" extends="my-parent">
</polymer-element>
<script type="application/dart" src="my-parent.dart"></script>
<p><my-parent>RED? (parent elment)</my-parent>
<p><my-child>RED? (child element)</my-child>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
Output in Dartium v36.0.1985.97 (280598) and Chrome v35.0.1916.153:
(I need 10 reputation to post images, so please see result at: http://s30.postimg.org/8j3x3l2m9/Dartium.png)
Output in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972)
(Result at: http://s1.postimg.org/f210lwhj3/Firefox.png)
I am inclined to classify this as a bug but would appreciate feedback from the SO community to see if there is anything wrong with my implementation. Are there any additional steps required to ensure the styled defined in the parent element is also applied when creating a child element?
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<button class="button1" on-click="increment()">Click me</button><br />
<span>(click count: {{count}})</span>
<style scoped>
div[is=x-click-counter] span {
color: red;
}
</style>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false