Menu
After developing on Chromium for a while I realised that Chrome implements shadow DOM properly while Chromium doesn't (yet) and broke my not-so-well encapsulated components. This is related to this other SO question but is more specifically directed at grid layout instead of just CSS.
If the layout is done in the top level document, it works, but if it's done within a custom element it doesn't work. As suggested in the other question I inserted relevant bootstrap code inside my components but still they don't seem to layout properly. Here is an example layout that works:
<!-- index.html -->
<div class="container-fluid">
<div class="row">
<my-element-a class="col-md-6">
<my-element-b class="col-md-6">
</div>
</div>
Here is an example that doesn't work:
<!-- custom-element-c.html -->
<div class="container-fluid">
<div class="row">
<my-element-a class="col-md-6">
<my-element-b class="col-md-6">
</div>
</div>
Is there a way to use Bootstrap grid layout within Polymer custom elements?
517
You haven't shown your full element code so I can only make an educated guess, but here goes.
up until about version 0.3.x, polymer had an option in it's JS global's within the component, called "applyAuthorStyles", setting this to 'true' made the component inherit any styles in the document level.
So for example if you had:
<html>
<head>
<title>....</title>
....
<link rel="stylesheet" type="text/css" href="/some/path/to/bootstrap.css" />
<script ... links to polymer & platform js />
</head>
<body>
<x-mypolymerelement></x-mypolymerelement>
</body>
</html>
then in your polymer component, you would have been able to do this:
<link rel="import" href="polymer.html">
<polymer-element name="x-mypolymerelement">
<template>
<.... html mark up here .....>
</template>
<script>
Polymer('x-mypolymerelement', {
applyAuthorStyles: true
});
</script>
</polymer-element>
The net result of all this would have been that your internal component mark-up contained inside the template would have used the Bootstrap styles without problem, and any extra styles or JS you implemented inside the component would have remained visible only internally.
Unfortunately, one of the biggest changes in the 0.3.x branch is that "applyAuthorStyles" has now been Deprecated, so with the latest versions the code above no longer works.
There are a few random blog posts, and some threads in the polymer Google groups kicking about with different ideas and suggestions on them on the best way to handle this, but for now the simplest way is just to add a link for the css inside your component like so:
<link rel="import" href="polymer.html">
<polymer-element name="x-mypolymerelement" attributes="dataUrl">
<template>
<link rel="stylesheet" href="/some/path/to/bootstrap.css">
<.... html mark up here .....>
</template>
<script>
Polymer('x-mypolymerelement', {
});
</script>
</polymer-element>
While still keeping your original link in the doc for your page wide styles.
I agree with what many are saying, that this is madness (Esp since you have to put this link in every component that uses it) and a better way needs to be found to share the styles.
For now, this is the simplest way to get it working, and for the record the link MUST be inside the template otherwise it won't work.
While where here, something else you also need to be aware of where bootstrap is concerned, you cannot currently use any of the JavaScript features.
Bootstraps JS manipulation looks for full fat elements using the full blown document dom, rather than the web components light dom, so without massive alterations to the BS JavaScript file, none of the JS functionality will work inside a polymer element either, well at least not yet anyway.
I have it on good authority, that those in the know have been looking to adapt BS to work inside polymer (and for that matter x-tags)
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
