material-components-web vs material-components-web-components #223
Comments
|
As far as i can tell material-components-web-components is a wrapper around material-components-web using web components. Not a reimplementation of the same thing. |
|
Yes and no, for me promoting it like this would not be a reimplementation, but as far as I can tell they go far beyond this. https://jsbin.com/lokufeqelu/edit?html,output <!doctype html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"/>
<meta name="mobile-web-app-capable" content="yes">
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import {html, render} from 'https://unpkg.com/lit-html'
import {MDCTextField} from 'https://unpkg.com/@material/textfield?module'
const helloWorld = () => {
class HelloWorld extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
const root = this.attachShadow({mode: 'open'});
render(html`
<style>
@import url('https://unpkg.com/material-components-web/dist/material-components-web.min.css')
</style>
<form>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
</form>
`, root)
MDCTextField.attachTo(root.querySelector('.mdc-text-field'))
}
}
customElements.define('hello-world', HelloWorld)
}
helloWorld()
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html> |
|
We have many wrappers, check out the link... Including the external big styles in web component is bad solution. |
|
Agree that including the external big styles in web component is bad, was just a quick example stripping out all the extra properties and methods included by material-components-web-components. I believe if we focus on making components that can extend other elements using |
|
material-components-web is the base implementation of Material Design, and intended to both be used as is, and extended with other libraries. This repo is for extending the base layer with Web Components, and is not intended to be a complete replacement of MDC. Your specific concerns about |
|
Closing in favor of #289 |
|
Oh nice, I hadn't heard of Form Associated Custom Elements but I really like the idea, it really opens up a new way of creating composable elements. |
Please correct me if I am wrong, doesn't the way you use web components break things like native capabilities with other elements for example the relation with
formandinputif you don't use theisattribute?Aren't you pushing it a bit to far? It's very confusing to have two repo's named material-components-web and material-components-web-components. This feels like a Python 2.x vs 3.x struggle.
I understand material-components-web doesn't use the full potential of web components, but is it really worth the mess to duplicate the effort?
Strongly recommend to use the
isattribute to ensure native capabilities or if browsers don't support it, drop it and join forces improving material-components-webThe text was updated successfully, but these errors were encountered: