@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
135 lines (119 loc) • 3.45 kB
HTML
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<custom-style>
<style is="custom-style">
unknown-host {
display: block;
}
html {
--border: 2px solid steelblue;
--mixin: {
color: blue;
};
}
</style>
</custom-style>
<script>
HTMLImports.whenReady(function() {
'use strict';
class UnknownHost extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
}
customElements.define('unknown-host', UnknownHost);
});
</script>
<dom-module id="x-foo">
<template>
<style>
:host {
border: var(--border);
display: block;
@apply --mixin;
}
</style>
x-foo
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<dom-module id="x-nest">
<template>
<style>
:host {
--border: 4px solid tomato;
}
</style>
<unknown-host id="unknown"></unknown-host>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-nest',
attached: function() {
this.$.unknown.shadowRoot.appendChild(document.createElement('x-foo'));
}
});
});
</script>
</dom-module>
<script>
suite('scoped-styling-unknown-host', function() {
function assertComputed(element, value, pseudo) {
var computed = getComputedStyle(element, pseudo);
assert.equal(computed['border-top-width'], value, 'computed style incorrect');
}
/* eslint-disable no-unused-vars */
function assertStylePropertyValue(properties, name, includeValue) {
assert.property(properties, name);
assert.include(properties[name], includeValue);
}
/* eslint-enable no-unused-vars */
test('element in top level unknown host styled via property defaults', function() {
var host = document.createElement('unknown-host');
var foo = document.createElement('x-foo');
host.shadowRoot.appendChild(foo);
document.body.appendChild(host);
if (window.ShadyDOM) {
ShadyDOM.flush();
}
assertComputed(foo, '2px');
});
test('element in unknown host styled via containing polymer element', function() {
var n = document.createElement('x-nest');
document.body.appendChild(n);
if (window.ShadyDOM) {
ShadyDOM.flush();
}
if (window.customElements.flush) {
customElements.flush();
}
var foo = n.$.unknown.shadowRoot.querySelector('x-foo');
assertComputed(foo, '4px');
});
});
</script>
</body>