This question already has an answer here:
Light DOM styles "leaking" into Polymer component's shadow DOM
(1 answer)
Closed 3 years ago.
I'm using polymer 1.0 and I have a html-file that looks like this:
<html>
<head>
<link rel="stylesheet" href="../vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../vendors/bootstrap/dist/css/bootstrap.min.css">
<!-- Polyfill Web Components support for older browsers -->
<script src="../vendors/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- 2. Use HTML Imports to bring in the elements. -->
<link rel="import" href="../vendors/paper-button/paper-button.html">
<link rel="import" href="../vendors/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../vendors/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../vendors/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../vendors/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../vendors/iron-icons/iron-icons.html">
<link rel="import" href="../vendors/iron-icon/iron-icon.html">
<link rel="import" href="../vendors/paper-item/paper-icon-item.html">
<link rel="import" href="../vendors/paper-item/paper-item-body.html">
</head>
<body>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<paper-icon-item scope="paper-icon-item">
<paper-icon-button icon="favorite"></paper-icon-button>
<paper-item-body two-line>
<div>Alphonso Engelking</div>
<div secondary>Change photo</div>
</paper-item-body>
</paper-icon-item>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content.. </div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
When I inspect it with the Chrome dev tools I see the following dom:
How come polymer is adding divs to the light dom? Why are things not hidden in the shadow dom? More specifically, the selected div element is screwing up the styling, how do I prevent it from messing up the layout?
Starting from 1.0, Polymer uses shadyDOM as default for all browsers(even where shadow DOM is supported).
What this means is that even on chrome, content inside local dom(Polymer name of shadow/shady dom) will be spilled on to light dom and will be accessible using dom manipulation APIs.
You can opt to use shadow dom where it is supported by tweaking global polymer settings.
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
Related
For whatever reason I can't seem to get my custom stulesheet to link to the HTML index. Bootstrap and Font Awesome styles work perfectly though
My HTML IS is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- start of scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- (bootstrap3) Latest compiled and minified JavaScript -->
<!-- end of scripts -->
<!-- start of stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- (bootstrap3) Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- (bootstrap3) Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- end of stylesheets -->
</head>
<body>
</body>
</html>
CSS is:
body {
background-color: lightblue;
}
And the File structure is:
/root
/css
-style.css
/js
-scripts.js
-index.html
Place your custom stylesheet after the bootstrap stylesheet in your head. The browser will read down, so custom stuff always comes last. In your code, Bootstrap would always take precedence over your custom style.
<link rel="stylesheet" type="text/css" href="css/style.css">
Or you can mark your custom css as !important:
body {
background-color: lightblue !important;
}
More on specificity here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There is something you need to know about CSS. your style sheets are read by the order you have added them. so you should add your own CSS file at the end for keeping them from overriding by previous CSS files.
if you have
.bg{background:red} in your first CSS file, and
.bg{background:green} in your last CSS file.
whenever you add .bg to the elements , the background color will be green not red.
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release
I'm playing with Polymer 1.0 by creating a simple custom-element (ui-button).
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<dom-module id="ui-button">
<link rel="import" type="css" href="ui-button.css">
<template>
<button class="ui button">
<template is="dom-if" if="{{icon}}"><i class="icon">1</i></template>
<template is="dom-if" if="{{label}}">{{label}}</template>
</button>
</template>
</dom-module>
<script src="ui-button.js"></script>
Everything works fine in Chrome, but in Firefox the button has no styling.
My guess is that the problem is the external stylesheet, because when i put the CSS inline (style-tag)...it works.
Is this a bug in Polymer 1.0?
I really want to use the external stylesheet...
This is working for me in both Chrome and Firefox. This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheet.css">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/app/general/your-element.html">
</head>
<body>
<your-element></your-element>
</body>
</html>
Inside the element, I'm using the css class / id references just like you would on any regular html tag. So, inside of your-element looks something like this:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="your-element">
<template>
<span class="some_class_style">Hey, I'm stylish!</span>
</template>
<script>
Polymer({
is: 'your-element',
...
});
</script>
</dom-module>
And, it's styled by whatever you defined for some_class_style. Keep in mind, I've only made elements that are one level deep (ie. no children elements), but it seems to be working fine.
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.